java ajax mysql 分页,如何将Ajax / JQuery实现到现有的PHP MYSQL分页脚本？

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

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

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 here

';}}

$range=4;

echo'

';

if($page>1){

echo "

<<";

$prevpage = $page - 1;

echo "

<";

}

for ($x = ($page - $range); $x < (($page + $range) + 1); $x++) {

if(($x>0)&&($x<= $totalpages)){

if($x==$page){

echo'

'.$x.'';

}

else{echo"$x";}

}

}

if($page!=$totalpages){

$nextpage=$page+1;

echo"

>";

echo "

>>";

}

echo '

';

?>

解决方法:

你的设置有点不清楚,但请耐心等待.

我将假设在客户端你知道何时加载下一页(即用户单击一个按钮或滚动到页面的末尾等…)我也将假设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”对象(数据：{“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 = $('');

div.append('' + pagination[i].post_title + "");

div.append('' + pagination[i].post_date + "");

$('#content').append(div)

}

}

})

}

jQuery会自动将此JSON输出解析为本机javascript对象.

采用这种让客户端进行标记的方法会使服务器负载过多,并且需要更少的带宽.

值得深思,希望有所帮助.

标签：jquery,php,ajax,pagination

来源： https://codeday.me/bug/20190625/1285675.html