通过 jQuery 问题的 PHP AJAX 分页

Question

有点奇怪，但可能是一个直截了当的答案。基本上，我使用 AJAX 脚本从 PHP 文件中检索结果，并将这些结果打印在应用分页的 div 中。我想要实现的是页面 search.php 向 getYear.php 文件触发一个值（一年），这设置了分页过程并将年份发送到分页解析器文件，该文件又返回结果。本质上，我有一个发送年份的脚本，然后是一个再次发送年份和分页详细信息的脚本，以及一个应用分页的脚本。当我在 URL 中设置年份时，我手动进行了这项工作，结果会打印出来，但它们不会打印在主页上。

这是 search.php 文件中的脚本：

<script>
    function showYear(year) {
        if (year == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getYear.php?year="+year,true);
            xmlhttp.send();
        }
    }
    </script> 

这确实会发送年份值，并希望将结果返回到 txthint div，然后将其发送到 getYear.php：

<?php
if(!isset($_GET['year'])){
echo 'No year given';
header("Location= search.php");
}
$year = intval($_GET['year']);

$con = mysqli_connect('localhost','XXXX','XXXX','XXXX');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

$sql = "SELECT COUNT(taskid) FROM tasks WHERE Year(date) = '$year'";
$query = mysqli_query($con, $sql);
$row = mysqli_fetch_row($query);

// Here we have the total row count
$total_rows = $row[0];
// Specify how many results per page
$rpp = 10;
// This tells us the page number of our last page
$last = ceil($total_rows/$rpp);
// This makes sure $last cannot be less than 1
if($last < 1){
    $last = 1;
}
// Close the database connection
mysqli_close($con);

?>
<script>
var rpp = <?php echo $rpp; ?>; // results per page
var last = <?php echo $last; ?>; // last page number
var year = <?php echo $year; ?>; // last page number
function request_page(pn){
    var results_box = document.getElementById("results_box");
    var pagination_controls = document.getElementById("pagination_controls");
    results_box.innerHTML = "loading results ...";
    var hr = new XMLHttpRequest();
    hr.open("POST", "pagination_parser.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var dataArray = hr.responseText.split("||");
            var html_output = "";
            for(i = 0; i < dataArray.length - 1; i++){
                var itemArray = dataArray[i].split("|");
                html_output += "<tr><td>"+itemArray[0]+"</td> <td>"+itemArray[1]+"</td> <td>"+itemArray[2]+"</td> <td>"+itemArray[3]+"</td> <td>"+itemArray[4]+"</td></tr><hr>";
            }
            results_box.innerHTML = html_output;
        }
    }
    hr.send("rpp="+rpp+"&last="+last+"&year="+year+"&pn="+pn);
    // Change the pagination controls
    var paginationCtrls = "";
    // Only if there is more than 1 page worth of results give the user pagination controls
    if(last != 1){
        if (pn > 1) {
            paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
        }
        paginationCtrls += ' &nbsp; &nbsp; <b>Page '+pn+' of '+last+'</b> &nbsp; &nbsp; ';
        if (pn != last) {
            paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
        }
    }
    pagination_controls.innerHTML = paginationCtrls;
};
</script>
</head>
<div class="container-fluid"> <!-- Table Headers -->
<table class="table table-hover table-responsive">
    <thead>
        <tr>
            <th></th><th>Title:</th><th>Date:</th><th>Type:</th><th>House Location:</th><th>Housemates:</th>
            <br>
        </tr>
    </thead>      

<tbody>
<div id="pagination_controls"></div>

<div id="results_box"></div>

</tbody>
</div>
</table>

<script> request_page(1); </script>

这里是可以工作的分页解析器：

<?php
// Make the script run only if there is a page number posted to this script
if(isset($_POST['pn'])){

    $rpp = preg_replace('#[^0-9]#', '', $_POST['rpp']);
    $last = preg_replace('#[^0-9]#', '', $_POST['last']);
    $year = ($_POST['year']);
    $pn = preg_replace('#[^0-9]#', '', $_POST['pn']);

    // This makes sure the page number isn't below 1, or more than our $last page
    if ($pn < 1) { 
        $pn = 1; 
    } else if ($pn > $last) { 
        $pn = $last; 
    }
    // Connect to our database here
    $con = mysqli_connect('localhost','XXX','XXX','XXXX');
    if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
    }
    // This sets the range of rows to query for the chosen $pn
    $limit = 'LIMIT ' .($pn - 1) * $rpp .',' .$rpp;
    // This is your query again, it is for grabbing just one page worth of rows by applying $limit
    $sql = "SELECT * FROM tasks WHERE Year(date)=$year ORDER BY taskid DESC $limit";
    $query = mysqli_query($con, $sql);
    $dataString = '';
    while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
        $title = $row["title"];
        $dateProduced = strftime("%b %d, %Y", strtotime($row["date"]));
        $type = $row["type"];
        $houseLocation = $row["houseLocation"];
        $housemates = $row["housemates"];
        $dataString .= $title.'|'.$dateProduced.'|'.$type.'|'.$houseLocation.'|'.$housemates.'||';
    }
    // Close your database connection
    mysqli_close($con);
    // Echo the results back to Ajax
    echo $dataString;
    exit();
}
?>

为了安全起见，我已经删掉了不必要的代码并且显然更改了连接细节。我也知道我正在使用 mysql，我目前正在课堂上学习 mysqli，但是我们还没有完成。

任何帮助将不胜感激。谢谢

Answer 1

好吧，如果代码本身没有任何问题，那么我认为这是因为您的 PHP 对于 javascript 来说有点太慢了。如果您使用 jquery，您可能希望将所有代码包装在 $('document').ready(function(){}); 中。如果你想坚持纯 javascript，你需要做更多的工作：

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
      document.getElementById('interactive').innerHTML = 'Document ready to accept interactions.'
  } else if (state == 'complete') {
      document.getElementById('complete').innerHTML = 'Document completely loaded'
  }
}

http://jsfiddle.net/electricvisions/Jacck/

代码取自这里：https://stackoverflow.com/a/9899701/1560336

编辑：

注意到实际问题：

var rpp = <?php echo $rpp; ?>; // results per page
var last = <?php echo $last; ?>; // last page number
var year = <?php echo $year; ?>; // last page number

这不起作用。您的 PHP 在服务器时间执行，因此 JS 永远不会看到这些值。您必须通过 AJAX 请求发送它们。一般来说，出于多种原因，混合使用 JS 和 PHP 是不好的做法。

另一个：编辑：

$.ajax({
      type: "POST",
      url: "link to php file here",
      data: "value1="+value1+"&value2="+value2+"&value3="+value3,
      success: function (result) {
           alert('It worked!');
      }
 });

Jquery 比普通的 javascript 更容易进行 AJAX 调用。对于您的脚本，我个人会先将您的所有 javascript 分成一个文件，然后将 php 留在 php 文件中。它会让你和其他人更容易阅读。然后你就可以像这样在php中保存数据了。

$var1 = $_POST['value1'];