php - 如何对现有的 PHP MYSQL 分页脚本实现 Ajax/JQuery？

Question

下面是一个显示 MySQL 数据库内容的工作分页脚本。我需要让页面在容器“#content”中无缝加载，而不是刷新整个页面。我广泛搜索了几个小时，但我遇到的教程都没有帮助我在此脚本上实现 Ajax/JQuery。

这是我用来显示我的文章 + 分页的代码。

<div id="content">
<?php
include('db.php');

$stmt = $db->query('SELECT * FROM db');
$numrows = $stmt->rowCount();
$rowsperpage=21;
$totalpages=ceil($numrows/$rowsperpage);

if(isset($pageid)&&is_numeric($pageid)){$page=$pageid;}else{$page=1;} 
if($page>$totalpages){$page = $totalpages;} 
if($page<1){$page=1;}

$offset=($page-1)*$rowsperpage;

$stmt=$db->prepare("SELECT * FROM db ORDER BY ID DESC LIMIT ?,?");
$stmt->bindValue(1, "$offset", PDO::PARAM_STR);
$stmt->bindValue(2, "$rowsperpage", PDO::PARAM_STR);

if($stmt->execute()) {
while ($row = $stmt->fetch()) {
echo '

<article>
article here
</article>

';}}

$range=4;
echo'
<div id="pagination">';

if($page>1){
echo "
<a href='http://www.domain.com/1/'><<</a>";
$prevpage = $page - 1;
echo "
<a href='http://www.domain.com/$prevpage/'><</a>";
}

for ($x = ($page - $range); $x < (($page + $range) + 1); $x++) {
if(($x>0)&&($x<= $totalpages)){
if($x==$page){
echo'
<span class="current">'.$x.'</span>';
}
else{echo"<a href='http://www.domain.com/$x/'>$x</a>";}
}
}

if($page!=$totalpages){
$nextpage=$page+1;
echo"
<a href='http://www.domain.com/$nextpage/'>></a>";
echo "
<a href='http://www.domain.com/$totalpages/'>>></a>";
} 
echo '
</div>';
?>

Answer 1

您的设置有点不清楚，但请耐心等待。

我将假设在客户端您知道何时加载下一页(即用户单击按钮或滚动到页面末尾等...)我还将假设您发布的 PHP 代码在其自己的文件中，并且仅输出您在问题中发布的内容(也就是它仅输出文章的 HTML，没有其他内容，没有包装器，没有任何内容，如果不是这样的话。

您要做的是使用 jQuery(从您的问题看来，您的网站上已经有了它，因此添加另一个库并不是太忌讳)向此 PHP 页面发出 AJAX 请求。然后 PHP 回显您发布的内容，jQuery 将其插入页面的 #content div 中。

首先要注意:我不建议让您的 PHP 页面输出内容 div，我会建议将其保留在客户端并且仅将其内容更改为您的脚本返回的内容。

要加载新内容，您可以在客户端使用此 javascript 函数:

function makePaginationRequest( pagenum = 1 ) {
    // Make ajax request
    $.ajax("test2.php", {
        // Data to send to the PHP page
        data: { "pagenum": pagenum },

        // Type of data to receive (html)
        dataType: 'html',

        // What to do if we encounter a problem fetching it
        error: function(xhr, text){
            alert("Whoops! The request for new content failed");
        },

        // What to do when this completes succesfully 
        success: function(pagination) {
            $('#content').html(pagination);
        }
    })
}

您可以将需要传递给服务器的任何其他参数放在“data”对象中(data: { "pagenum": pagenum }, 以键值形式)。您可以从示例中可以看出，您将页码传递给此函数，它会将“pagenum”请求变量传递给服务器。

您显然需要实现更好的错误处理程序。以及将“test2.htm”文件名更改为您的 PHP 脚本的文件名。

更好的方法

我觉得有必要提一下:

上面的方法(你要求的)确实是一种困惑的方法。每当您从服务器请求 AJAX 数据时，服务器应该返回内容，而不是标记。然后，您应该将此内容插入到客户端的标记中。

为此，您需要修改 PHP 脚本，首先将所有内容放入一个数组(或多篇文章的数组)中，如下所示:

while ($row = $stmt->fetch()) {
    $output_array[] = array(
        "post_title" => $row["title"],
        "post_date" => $row["date"],
        // etc....
    );
}

然后像这样回显它:

die(json_encode($output_array));

然后修改你的json请求:

function makePaginationRequest( pagenum = 1 ) {
    $.ajax("test2.htm", {
        data: { "pagenum": pagenum },
        dataType: 'json',
        error: function(xhr, text){
            alert("Whoops! The request for new content failed");
        },
        success: function(pagination) {
            // Empty the content area
            $('#content').empty();

            // Insert each item
            for ( var i in pagination ) {
                var div = $('<article></article>');
                div.append('<span class="title">' + pagination[i].post_title + "</span>");
                div.append('<span class="date">' + pagination[i].post_date + "</span>");
                $('#content').append(div)
            }
        }
    })
}

jQuery 会自动为您将此 JSON 输出解析为 native javascript 对象。

采用这种让客户端制作标记的方法可以减轻服务器的大量负载，并且需要更少的带宽。

深思熟虑，希望对您有所帮助。