Ajax achieves paging effect without refreshing

This time I will bring you the paging effect without Ajax refreshing. What are the precautions for achieving the paging effect without Ajax refreshing? The following is a practical case, let's take a look.

Ajax has no refresh paging effect, the following code implements it

nbsp;html>


 <meta>
 <title>Ajax无刷新分页效果</title>
 <script>
 function showpage(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
   document.getElementById("result").innerHTML = xhr.responseText;
  }
  }
  xhr.open(&#39;get&#39;,url);
  xhr.send(null);
 }
 window.onload = function () {
  showpage(&#39;page.php&#39;);
 }
 </script>


  <h2 id="Ajax无刷新分页效果">Ajax无刷新分页效果</h2>
  <p></p>

The paging code found online, can be used for personal testing~

/*
* Created on 2011-07-28
* Author : LKK , http://lianq.net
* 使用方法：
require_once('mypage.php');
$result=mysql_query("select * from mytable", $myconn);
$total=mysql_num_rows($result); //取得信息总数
pagepide($total,10); //调用分页函数
//数据库操作
$result=mysql_query("select * from mytable limit $sqlfirst,$shownu", $myconn);
while($row=mysql_fetch_array($result)){
...您的操作
}
echo $pagecon; //输出分页导航内容
*/
//if(!function_exists("pagepide")){
#$total 信息总数
#$shownu 显示数量,默认20
#$url 本页链接
 function pagepide($total,$shownu=20,$url=''){
#$page 当前页码
#$sqlfirst mysql数据库起始项
#$pagecon 分页导航内容
 global $page,$sqlfirst,$pagecon,$_SERVER;
 $GLOBALS["shownu"]=$shownu;
 if(isset($_GET['page'])){
  $page=$_GET['page'];
 }else $page=1;
#如果$url使用默认,即空值,则赋值为本页URL
 if(!$url){ $url=$_SERVER["REQUEST_URI"];}
#URL分析
 $parse_url=parse_url($url);
 @$url_query=$parse_url["query"]; //取出在问号?之后内容
 if($url_query){
  $url_query=preg_replace("/(&?)(page=$page)/","",$url_query);
  $url = str_replace($parse_url["query"],$url_query,$url);
  if($url_query){
  $url .= "&page";
  }else $url .= "page";
 }else $url .= "?page";
#页码计算
 $lastpg=ceil($total/$shownu); //最后页,总页数
 $page=min($lastpg,$page);
 $prepg=$page-1; //上一页
 $nextpg=($page==$lastpg ? 0 : $page+1); //下一页
 $sqlfirst=($page-1)*$shownu;
#开始分页导航内容
 $pagecon = "显示第 ".($total?($sqlfirst+1):0)."-".min($sqlfirst+$shownu,$total)." 条记录，共 <b>$total</b> 条记录";
 if($lastpg首页 "; else $pagecon .=" 首页 ";
// if($prepg) $pagecon .=" <a>前页</a> "; else $pagecon .=" 前页 ";
// if($nextpg) $pagecon .=" <a>后页</a> "; else $pagecon .=" 后页 ";
// if($page!=$lastpg) $pagecon.=" <a>尾页</a> "; else $pagecon .=" 尾页 ";
 if($page!=1) $pagecon .=" <a>首页</a> "; else $pagecon .=" 首页 ";
 if($prepg) $pagecon .=" <a>前页</a> "; else $pagecon .=" 前页 ";
 if($nextpg) $pagecon .=" <a>后页</a> "; else $pagecon .=" 后页 ";
 if($page!=$lastpg) $pagecon.=" <a>尾页</a> "; else $pagecon .=" 尾页 ";
#下拉跳转列表,循环列出所有页码
// $pagecon .="　到第 <select>\n";
 $pagecon .="　到第 <select>\n";
 for($i=1;$i$i\n";
  else $pagecon .="<option>$i</option>\n";
 }
 $pagecon .="</select> 页，共 $lastpg 页";
 return $page;
 }
//}else die('pagepide()同名函数已经存在!');</select>

The following is a simple paging display I made

<?php  header("Content-type:text/html; charset=utf-8");
 $link = mysqli_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123&#39;,&#39;good&#39;);
if (!$link)
{
 die("连接错误: " . mysqli_connect_error());
}
$sql = "SELECT * FROM ecs_category";
$qry = mysqli_query($link,$sql);
$total = mysqli_num_rows($qry);
$per = 10;
$page = pagepide($total,$per);
$sql = "SELECT cat_id,cat_name FROM category limit $sqlfirst,$shownu";
 $result = mysqli_query($link,$sql);
 //$goods = mysqli_fetch_all($result,MYSQLI_ASSOC);
 //mysqli_free_result($result);
echo <<<eof
 <style type="text/css">
 table{width:500px;margin:auto;border: 1px solid black; border-collapse:collapse;text-align:center;}
 td{border: 1px solid black;}
 
 

   eof;  $num = ($page - 1) * $per; // foreach ($goods as $k => $v) {  while($goods = mysqli_fetch_assoc($result)){  echo "";  echo "";  echo "";  echo "";  echo "";  }  echo "";  echo "

序号	商品编号	商品类型
".++$num."	$goods[cat_id]	$goods[cat_name]
$pagecon

";

The page will not be refreshed and the URL will not change. You can see the data interaction of the website

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Ajax+Spring implements file upload

Ajax front-end and back-end interaction method

The above is the detailed content of Ajax achieves paging effect without refreshing. For more information, please follow other related articles on the PHP Chinese website!