如何将Ajax / JQuery实现到现有的PHP MYSQL分页脚本?
下面是一个工作分页脚本,显示
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>'; ?> 解决方法
你的设置有点不清楚,但请耐心等待.
我将假设在客户端你知道何时加载下一页(即用户单击一个按钮或滚动到页面的末尾等…)我也将假设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,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输出解析为本机javascript对象. 采用这种让客户端进行标记的方法会使服务器负载过多,并且需要更少的带宽. 值得深思,希望有所帮助. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |