Ajax实现无刷新分页效果

傷城~ 2022-05-20 07:24 321阅读 0赞

# 一、无刷新分页技术的必要性 #

![70][]

如果我们通过“传统方式”实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来，这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用ajax无刷新分页，每次就只从服务器获得”商品评论区域“信息即可，对各方面资源的使用就有相应节省，因此ajax无刷新分页效果有其存在的必要性。

# 二、具体实现 #

商品总记录条数、每页显示多少条

mysql 数据库关键字limit

limit 偏移量，长度

偏移量：（当前页码-1）\*每页显示条数

limit 0,7

limit 7,7

limit 14,7

# 三、制作传统分页效果 #

http://网址/data.php?page=1 第一页

http://网址/data.php?page=2 第二页

http://网址/data.php?page=3 第三页

# 服务器端data.php: #

<?php
    header("content-type: text/html; charset=utf-8");
    error_reporting(E_ALL ^ E_DEPRECATED);
    
    //制作传统分页效果，连接数据库，获得数据、分页显示
    $link = mysql_connect('localhost', 'root','');
    mysql_select_db('taobao',$link);
    mysql_query('set names utf8');
    
    //实现数据分页
    //第一步：引入分页类
    include("./Pagination.php");
    
    // //第二步：获得总记录条数
    $sql = "select * from dg_taobao";
    $qry = mysql_query($sql);
    $total = mysql_num_rows($qry);
    $per = 7;
    
    //第三步：实例化分页类对象
    $page_obj = new Pagination($total, $per);
    
    //第四步：制作sql语句，获得每页信息
    //$page_obj->limit：分页类会根据当前的页码把“limit偏移量长度”给制作好
    $sql3 = "select * from dg_taobao ".$page_obj->limit;  //一定注意select * from dg_taobao后有一个空格，坑死我啦~~
    $qry3 = mysql_query($sql3);
    
    //第五步：获得页码列表
    $page_list = $page_obj->fpage(array(3,4,5,6,7,8));
    
    echo <<<eof
    <style type="text/css">
    	table{width:700px; margin:auto; border:1px solid black; border-collapse:collapse}
    	td{border:1px solid black;}
    </style>
    	<table>
    		<tr><td>序号</td><td>名称</td><td>数量</td><td>类别</td><td>重量</td></tr>
    eof;
    // $num = （当前页码-1）*每页条数;
    $p = isset($_GET['page'])?$_GET['page']:1;
    $num = ($p-1)*$per;
    if($qry3){
    	while ($rst3 = mysql_fetch_assoc($qry3)) {
    	echo "<tr>";
    	echo "<td>".++$num."</td>";
    	echo "<td>".$rst3['name']."</td>";
    	echo "<td>".$rst3['number']."</td>";
    	echo "<td>".$rst3['category']."</td>";
    	echo "<td>".$rst3['weight']."</td>";
    	echo "</tr>";
    }
    }
    echo "<tr><td colspan='5'>$page_list</td></tr>";
    echo "</table>";

# 分页类Pagination.php： #

<?php
    ini_set("error_reporting",E_ALL ^ E_NOTICE);
    /* 
     * 分页类，以组件形式存在
     */
    class Pagination {
    		private $total; //数据表中总记录数
    		private $listRows; //每页显示行数
    		private $limit;
    		private $uri;
    		private $pageNum; //页数
    		private $config=array('header'=>"个记录", "prev"=>"上一页", "next"=>"下一页", "first"=>"首 页", "last"=>"尾 页");
    		private $listNum=8;
                  
                    /*
    		 * $total 
    		 * $listRows
    		 */
    		public function __construct($total, $listRows=10, $pa=""){
    			$this->total=$total;
    			$this->listRows=$listRows;
    			$this->uri=$this->getUri($pa);
    			$this->page=!empty($_GET["page"]) ? $_GET["page"] : 1;
    			$this->pageNum=ceil($this->total/$this->listRows);
    			$this->limit=$this->setLimit();
    		}
    
    		private function setLimit(){
    			return "Limit ".($this->page-1)*$this->listRows.", {$this->listRows}";
    		}
    
    		private function getUri($pa){
    			$url=$_SERVER["REQUEST_URI"].(strpos($_SERVER["REQUEST_URI"], '?')?'':"?").$pa;
    			$parse=parse_url($url);
    
    			if(isset($parse["query"])){
    				parse_str($parse['query'],$params);
    				unset($params["page"]);
    				$url=$parse['path'].'?'.http_build_query($params);
    				
    			}
    
    			return $url;
    		}
    
    		function __get($args){
    			if($args=="limit")
    				return $this->limit;
    			else
    				return null;
    		}
    
    		private function start(){
    			if($this->total==0){
    				return 0;
                            }
    			else{
    				return ($this->page-1)*$this->listRows+1;
                            }
    		}
    
    		private function end(){
    			return min($this->page*$this->listRows,$this->total);
    		}
    
    		private function first(){
    			if($this->page==1){
    				$html.='';
                            }
    			else{
    				$html.="  <a href='{$this->uri}&page=1'>{$this->config["first"]}</a>  ";
                            }
    			return $html;
    		}
    
    		private function prev(){
    			if($this->page==1){
    				$html.='';
                            }
    			else{
    				$html.="  <a href='{$this->uri}&page=".($this->page-1)."'>{$this->config["prev"]}</a>  ";
                            }
    			return $html;
    		}
    
    		private function pageList(){
    			$linkPage="";
    			
    			$inum=floor($this->listNum/2);
    		
    			for($i=$inum; $i>=1; $i--){
    				$page=$this->page-$i;
    
    				if($page<1)
    					continue;
    
    				$linkPage.=" <a href='{$this->uri}&page={$page}'>{$page}</a> ";
    
    			}
    		
    			$linkPage.=" {$this->page} ";
    			
    
    			for($i=1; $i<=$inum; $i++){
    				$page=$this->page+$i;
    				if($page<=$this->pageNum)
    					$linkPage.=" <a href='{$this->uri}&page={$page}'>{$page}</a> ";
    				else
    					break;
    			}
    
    			return $linkPage;
    		}
    
    		private function next(){
    			if($this->page==$this->pageNum)
    				$html.='';
    			else
    				$html.="  <a href='{$this->uri}&page=".($this->page+1)."'>{$this->config["next"]}</a>  ";
    
    			return $html;
    		}
    
    		private function last(){
    			if($this->page==$this->pageNum)
    				$html.='';
    			else
    				$html.="  <a href='{$this->uri}&page=".($this->pageNum)."'>{$this->config["last"]}</a>  ";
    
    			return $html;
    		}
    
    		private function goPage(){
    			return '  <input type="text"  style="margin:0px 0px;width:28px;height:16px;" οnkeydοwn="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;location=\''.$this->uri.'&page=\'+page+\'\'}" value="'.$this->page.'"><input style="margin:0px 0px;" type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;location=\''.$this->uri.'&page=\'+page+\'\'">  ';
    		}
    		function fpage($display=array(0,1,2,3,4,5,6,7,8)){
    			$html[0]="  共有<b>{$this->total}</b>{$this->config["header"]}  ";
    			$html[1]="  每页显示<b>".($this->end()-$this->start()+1)."</b>条，本页<b>{$this->start()}-{$this->end()}</b>条  ";
    			$html[2]="  <b>{$this->page}/{$this->pageNum}</b>页  ";
    			
    			$html[3]=$this->first();
    			$html[4]=$this->prev();
    			$html[5]=$this->pageList();
    			$html[6]=$this->next();
    			$html[7]=$this->last();
    			$html[8]=$this->goPage();
    			$fpage='';
    			foreach($display as $index){
    				$fpage.=$html[$index];
    			}
    
    			return $fpage;
    
    		}
    	
    	}

# 传统分页效果如下：每点击下方页码，浏览器的url就会改变，导致整个页面刷新。 #

![70 1][]

# 四、制作ajax无刷新分页效果 #

ajax无刷新分页效果是对传统分页效果的封装

ajax对象.open('get', 'data.php?page=3');

以上是ajax通过无刷新方式获得第3页数据

# 主访问页index.html: #

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ajax无刷新分页效果</title>
    	<script type="text/javascript">
    		//制作函数（ajax去获得分页信息）
    		function showpage(url){
    			var xhr = new XMLHttpRequest();
    			xhr.onreadystatechange = function(){
    				if(xhr.readyState==4){
    					document.getElementById('result').innerHTML = xhr.responseText;
    				}
    			}
    			xhr.open('get', url);
    			xhr.send(null);
    		}
    		window.onload = function(){
    			showpage('./data.php');
    		}
    	</script>
    	<style type="text/css">
    		h2, div{width:700px; margin: auto;}
    		h2{text-align: center}
    	</style>
    </head>
    <body>
    	<h2>ajax无刷新分页效果</h2>
    	<div id="result"></div>
    </body>
    </html>

# 对分页类Pagination.php的修改: #

private function first(){
    			if($this->page==1){
    				$html.='';
                            }
    			else{
    				// $html.="  <a href='{$this->uri}&page=1'>{$this->config["first"]}</a>  ";
    				$html.="  <a href='javascript:showpage(\"{$this->uri}&page=1\")'>{$this->config["first"]}</a>  ";
                            }
    			return $html;
    		}
    
    		private function prev(){
    			if($this->page==1){
    				$html.='';
                            }
    			else{
    				// $html.="  <a href='{$this->uri}&page=".($this->page-1)."'>{$this->config["prev"]}</a>  ";
    				$html.="  <a href='javascript:showpage(\"{$this->uri}&page=".($this->page-1)."\")'>{$this->config["prev"]}</a>  ";
                            }
    			return $html;
    		}
    
    		private function pageList(){
    			$linkPage="";
    			
    			$inum=floor($this->listNum/2);
    		
    			for($i=$inum; $i>=1; $i--){
    				$page=$this->page-$i;
    
    				if($page<1)
    					continue;
    
    				// $linkPage.=" <a href='{$this->uri}&page={$page}'>{$page}</a> ";
    				$linkPage.=" <a href='javascript:showpage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
    
    			}
    		
    			$linkPage.=" {$this->page} ";
    			
    
    			for($i=1; $i<=$inum; $i++){
    				$page=$this->page+$i;
    				if($page<=$this->pageNum){
    					// $linkPage.=" <a href='{$this->uri}&page={$page}'>{$page}</a> ";
    					$linkPage.=" <a href='javascript:showpage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
    				}
    				else{
    					break;
    				}
    			}
    
    			return $linkPage;
    		}
    
    		private function next(){
    			if($this->page==$this->pageNum)
    				$html.='';
    			else
    				// $html.="  <a href='{$this->uri}&page=".($this->page+1)."'>{$this->config["next"]}</a>  ";
    				$html.="  <a href='javascript:showpage(\"{$this->uri}&page=".($this->page+1)."\")'>{$this->config["next"]}</a>  ";
    
    			return $html;
    		}
    
    		private function last(){
    			if($this->page==$this->pageNum)
    				$html.='';
    			else
    				// $html.="  <a href='{$this->uri}&page=".($this->pageNum)."'>{$this->config["last"]}</a>  ";
    				$html.="  <a href='javascript:showpage(\"{$this->uri}&page=".($this->pageNum)."\")'>{$this->config["last"]}</a>  ";
    
    			return $html;
    		}
    
    		private function goPage(){
    			// return '  <input type="text"  style="margin:0px 0px;width:28px;height:16px;" οnkeydοwn="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;location=\''.$this->uri.'&page=\'+page+\'\'}" value="'.$this->page.'"><input style="margin:0px 0px;" type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;location=\''.$this->uri.'&page=\'+page+\'\'">  ';
    			return '  <input type="text"  style="margin:0px 0px;width:28px;height:16px;" οnkeydοwn="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;showpage(\''.$this->uri.'&page=\'+page+\'\')}" value="'.$this->page.'"><input style="margin:0px 0px;" type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;showpage(\''.$this->uri.'&page=\'+page+\'\')">  ';
    		}

# 无刷新分页效果如下所示： #

![70 2][]

# 总结： #

1、无刷新主要的工作是把分页类页码列表的超链接变为showpage() js函数的调用：

![WEBRESOURCE252af5e4a582280ff6b6ad97a981297d][]

# 2、在主访问页面index.html制作一个获得分页信息的函数（ajax去获得分页信息） #

![WEBRESOURCE9b95aac20a5329bbe05277a709807ed6][]

另附数据库sql语句，有兴趣的小伙伴可以拿来练练手~

**链接:** https://pan.baidu.com/s/1Ob6CohStWBGN3M3HysiVeQ **密码:** yjsm

[70]: /images/20220520/8efff70ca78e4f459824e3c01b4f7f79.png
[70 1]: /images/20220520/f5ea866a347449f9ae1e8770f6b50999.png
[70 2]: /images/20220520/353e6cedfe2744059ca0eb121c3fc16b.png
[WEBRESOURCE252af5e4a582280ff6b6ad97a981297d]: http://note.youdao.com/yws/res/4777/WEBRESOURCE252af5e4a582280ff6b6ad97a981297d
[WEBRESOURCE9b95aac20a5329bbe05277a709807ed6]: http://note.youdao.com/yws/res/4779/WEBRESOURCE9b95aac20a5329bbe05277a709807ed6