Ajax分页脚本将变量发送到php脚本

时间:2014-09-26 15:25:46

标签: javascript php jquery ajax pagination

 //index.php
<?php
    include("config.inc.php");
    if(!empty($_GET['email'])){
        $dude = $_GET['email']; // user email address to be gotten by javascript variable 
    // dude and sent to fetch_pages.php
        echo '<input type="text" style="display:none" id="hide" value="'. $dude .'" />';
        }
    $results = mysqli_query($connecDB,"SELECT COUNT(*) FROM user_registration_details");
    $get_total_rows = mysqli_fetch_array($results); //total records
    $item_per_page = 5;
    //break total records into pages
    $pages = ceil($get_total_rows[0]/$item_per_page);   

    //create pagination
    if($pages > 1)
    {
        $pagination = '';
        $pagination .= '<ul class="paginate">';
        for($i = 1; $i< $pages; $i++)
        {
            $pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
        }
        $pagination .= '</ul>';
    }

    ?>
    <?php
    /*
    * Ajax form submit
    */

    # request sent using HTTP_X_REQUESTED_WITH
    if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
        if (isset($_POST['name']) AND isset($_POST['email']) AND isset($_POST['subject']) AND isset($_POST['message'])) {
            $to = 'your@mail.id';

            $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
            $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
            $subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
            $message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
            $sent = email($to, $email, $name, $subject, $message);
            if ($sent) {
                echo 'Message sent!';
            } else {
                echo 'Message couldn\'t sent!';
            }
        }
        else {
            echo 'All Fields are required';
        }
        return;
    }

    /**
     * email function
     *
     * @return bool | void
     **/
    function email($to, $from_mail, $from_name, $subject, $message){
        $header = array();
        $header[] = "MIME-Version: 1.0";
        $header[] = "From: {$from_name}<{$from_mail}>";
        /* Set message content type HTML*/
        $header[] = "Content-type:text/html; charset=iso-8859-1";
        $header[] = "Content-Transfer-Encoding: 7bit";
        if( mail($to, $subject, $message, implode("\r\n", $header)) ) return true; 
    }

    ?>

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax Pagination</title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var dude = document.getElementById("hide").value;//variable to be sent to fetch_pages //to present user email



    $("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});  //initial page number to load

        $(".paginate_click").click(function (e) {

            $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');

            var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
            var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need 

            $('.paginate_click').removeClass('active'); //remove any active class

            //post page number and load returned data into result element
            //notice (page_num-1), subtract 1 to get actual starting point
            $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){

            });

            $(this).addClass('active'); //add active class to currently clicked element (style purpose)

            return false; //prevent going to herf link
        }); 
    });
    </script>
    <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="profiler.js"></script>

    <style type="text/css">
    @import url("style2.css");
    </style>
    <link href="style5.css" rel="stylesheet" type="text/css">
    </head>
    <body onload="profiler();">
    <div id="firstdiv">
    <p></p>
    <img id="image1" src="2347033609685.jpg"  alt="Profile Pic" height="170" width="180" />
    <table id="pname"><tr height="49"><td id="name">Richard Berry</td></tr>
    <tr  id="num"><td>08023818955</td><td width="400">Agent with homes and good event centres</td></tr>
    <tr height="20"><td width="200">Specialties: Event Centres / Venue</td>
    </tr></table>
    <table id="like"><tr><td width="6"></td><td width="31"><a href="get.php"><img src="2347033609685.jpg" height="27" width="27"  /></a></td>
    <td width="71"><a href="dude.php"><img src="yahoo2.PNG" height="27" width="27" /></a></td></tr>
    </table>
    <table id="pdetails"><tr><td width="200"><p  id="over" onclick="profilerr('pover');" ><button id="o">Overview</button></p></td>
    <td width="220"><p id="list" onclick="profile('plist');"><button id="l">Listings()</button></p></td>
    <td width="221"><p id="about" onclick="profiles('pabout');"><button id="a">About</button></p></td>
    </tr></table>
    <div id="pabout" style="display:none">
    <table>
    <tr><td id="name">About Richard Berry</td></tr>
    <tr><td>Firstly, there are two sets of people who come to this hall. The first set are those who just come to watch and/or charge gadgets and the second set are those who come to train.
    To the first set of people, we plead that you kindly stay in the waiting area when you visit the hall and far from tables especially when people are playing because most times it serves as a means of distraction and also playing on table is prohibited.
    Secondly, to the second set of people who are registered members of the team we are pleading that you should always be in complete sport outfit whenever you come for training and should avoid littering of the hall with nylons, papers, bottles e.t.c
    Most especially the new training timetable for the semester is below:</td></tr>
    </table></div>

    <div id="pover" style="display:none">
    <table>
    <tr><td id="name">About Richard Berry</td></tr>
    <tr><td>Firstly, there are two sets of people who come to this hall. The first set are those who just come to watch and/or charge gadgets and the second set are those who come to train.
    To the first set of people, we plead that you kindly stay in the waiting area when you visit the hall and far from tables especially when people are playing because most times it serves as a means of distraction and also playing on table is prohibited.
    Secondly, to the second set of people who are registered members of the team we are pleading that you should always be in complete sport outfit whenever you come for training and should avoid littering of the hall with nylons, papers, bottles e.t.c
    Most especially the new training timetable for the semester is below:</td></tr>
    <tr><td id="listl">Listings (2401) by Richard Berry</td></tr>
    </table></div>
    <div id="plist" style="display:none">
    <table>
    <tr><td id="listl">Listings(2401) by Richard Berry</td></tr>
    <tr></tr></table>

    <div id="results"></div>
    <?php echo $pagination; ?>
    </div>




    </div>  
    <div id="wrap">
    <p id="compdiv">Contact Supplier</p>
            <div class="alert">Hello</div>
            <form id="form" action="" method="post">
                <div>
                    <label>
                        <span id="spandisp">Name: * </span>
                        <input placeholder="Name" type="text" id="input" name="name" required>
                    </label>
                </div>
                <div>
                    <label>
                        <span id="spandisp">Email: *                                                                          </span>
                              <input placeholder="Email address" id="input" type="email" name="email" required>
                    </label>
                </div>
                <div>
                    <label>
                        <span id="spandisp">Subject: * </span>
                        <input placeholder="Subject" id="input" type="text" name="subject" required>
                    </label>
                </div>
                <div>
                    <label>
                        <span id="spandisp">Message: *</span>
                        <textarea id="input2" placeholder="Type your message here...." name="message" required></textarea>
                    </label>
                </div>
                <div>
                    <button name="submit" type="submit" id="submit">Send Message</button>
                </div>

            </form>
            <p>Note: * Fields are required</p>
        </div>
        </div>

    </body>
    </html>

//config.inc.php

    <?php

    $db_username = 'root';
    $db_password = '****';
    $db_name = '****';
    $db_host = 'localhost';
    $item_per_page = 5;


    $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name) or 
    die('could not connect to database');
        ?>

//fetch_pages

    <?php

    include("config.inc.php"); //include config file

        $item_per_page = 5;

    //sanitize post value
    $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
    if(!empty($_POST['email'])){
        $email = $_POST['email'];
        echo "gotcha";
    } 

    //validate page number is really numaric
    if(!is_numeric($page_number)){die('Invalid page number!');}

    //get current starting point of records
    $position = ($page_number * $item_per_page);

    //Limit our results within a specified range. 
    $results = mysqli_query($connecDB,"SELECT * FROM user_registration_details WHERE email = '$email' ORDER BY id ASC LIMIT $position, $item_per_page");

    //output results from database
    echo '<ul class="page_result">';
    while($row = mysqli_fetch_array($results))
    {
        echo '<li id="item_'.$row["id"].'">'.$row["id"].'. <span class="page_name">'.$row["contact_name"].'</span><span class="page_message">'.$row["email"].'</span><span class="view"><a href="viewmore.php?id=' . $row["id"] . '">    View Details</a></span></li>';
    }
    echo '</ul>';


    ?>

请上面的代码从URL获取用户电子邮件,并成功将其输入到JavaScript变量dude中。此外,所有AJAX分页脚本都完美地运行,因为我只是想要将用户电子邮件发送到fetch_pages.php以便能够根据特定用户电子邮件限制搜索。请问如何在不刷新页面的情况下将用户电子邮件详细信息发送到fetch_pages,并且仍然不会干扰分页脚本。因为我需要一个重大项目的脚本,所以需要所有的帮助。

1 个答案:

答案 0 :(得分:0)

我开始明白,唯一的问题是在javascript代码中加入dude,如下所示。 同一个网页不能同时向同一个php发送两个ajax请求。

$("#results").load("fetch_pages.php", {'page':0, 'email':(dude)}, function() {$("#1-page").addClass('active');});  //initial page number to load

        $(".paginate_click").click(function (e) {

            $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');

            var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
            var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need 

            $('.paginate_click').removeClass('active'); //remove any active class

            //post page number and load returned data into result element
            //notice (page_num-1), subtract 1 to get actual starting point
            $("#results").load("fetch_pages.php", {'page':(page_num-1),'email':(dude)}, function(){

            });