Ajax+Js+Dom+Json无刷新分页技术_H5之家 - 中国HTML5教程资源分享第一站

Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
对串流媒体的支持没有FLASH、Java Applet好。

说了那么多，还是上真货，分析代码：

客户端代码：

Code:

<?php include("../include/dbconn.php"); //定义分页时每页显示的条数 $PAGESIZE=15; //得到最大页 $sql="select count(*) from area"; $rs=mysql_query($sql); //得到查询的结果 $rowsNum=mysql_result($rs,0); //得到总页数 $maxPage=ceil($rowsNum/$PAGESIZE); //判断是否存在当前页值，如果存在，则当前页等于接收到得值，用于显示下面的“滑坨”起始判断 //if($_GET['nowpage']){ //$nowpage=$_GET['nowpage']; //}else{ //不存在则设置当前页为1 // $nowpage=1; //} ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .list{ width:750px; height:460px; background-color:#99FF66; overflow:auto; border:#0000FF 1px dotted; margin:0 auto; } .pageNum{ width:750px; height:30px; background-color: #999999; overflow:auto; border:#0000FF 1px dotted; margin:0 auto; text-align:center; } </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript" type="text/javascript" src="../include/ajax.js"></script> <script language="javascript" type="text/javascript"> var nowpage=1; var totalPage=<?php echo $maxPage; ?>; var startPage=1; var endPage=totalPage; function initPage(){ var pageStr=""; //判断总页数是否大于11，如果小于11，不处理起始、最终页码 if(totalPage>11){ //判断当前页-10是否存在，如果不存在则不设置起始页码 if(nowpage-10>0){ startPage=nowpage-10; } //判断当前页+9是否超过总页数，如过没有超过，则设置最终页码 if(nowpage+9<totalPage){ //设置最终页码 endPage=nowpage+9; }else{ //解决最后几页不显示的问题 endPage=totalPage; } } //判断是否显示上一页 if(nowpage!=1){ pageStr+=" <a href=javascript:void(0) onclick=getDataPage("+(nowpage-1)+") >上一页</a>"; } for(var i=startPage;i<=endPage;i++){ pageStr+=" <a href=javascript:void(0) onclick=getDataPage("+i+")>"; //判断是否加粗显示 if(nowpage==i){ //设置加粗显示 pageStr+="<b><font color=yellow>"+i+"</font></b>"; }else{ pageStr+=i; } pageStr+="</a>"; } //判断是否显示下一页 if(nowpage<totalPage){ pageStr+=" <a href=javascript:void(0) onclick=getDataPage("+(nowpage+1)+")>下一页</a>"; } //将当前的字符串显示到div中 document.getElementById("pageNum").innerHTML=pageStr; } /* 调用ajax引擎，根据页码查询数据库，返回当前的信息 */ function getDataPage(Page){ //定义url var url="./getDataPage2.php"; //定义变量 var params="nowPage="+Page+"&pageSize="+<?php echo $PAGESIZE ?>; //调用ajax引擎，并制定函数处理服务器返回的结果 ajaxget(url,params,getDataPageProcess); } /* 处理服务器返回的数据，并显示出来 */ function getDataPageProcess(xhr){ //重新初始化开始页 startPage=1; //将json字符串转换为对象 var responseObj=eval("("+xhr.responseText+")"); //接收并设置当前页 nowpage=parseInt(responseObj.nowPage); //重新初始化一下页码显示 initPage(); //显示出所有的数据 var liststr="<table> <tr> <th>id</th> <th>名称</th> <th>拼音</th> <th>编码</th> <th>缩写</th> </tr>"; for(var i=0;i<responseObj.areas.length;i++){ liststr+="<tr> <td>"+responseObj.areas[i].id+"</td> <td>"+responseObj.areas[i].name+"</td> <td>"+responseObj.areas[i].p+"</td> <td>"+responseObj.areas[i].code+"</td> <td>"+responseObj.areas[i].l+"</td> </tr>"; } liststr+="</table>"; //将拼接完成的table字符串显示在id为list的div中 document.getElementById("list").innerHTML=liststr; } </script> </head> <body> <div></div> <div></div> </body> </html>

客户端通过每次传递当前页和每页显示的数据大小到服务器端，服务器端接受参数并按照分页算法，查询对应的数据，并且返回Json格式的字符串，客户端根据服务端返回的Json字符串，通过使用eval方法转换为对象并存放到resopnseObj变量中，则我们可以通过访问responseObj访问查询的数据，最后使用javascript Dom中对象的innerHTML的方法实现数据的显示

服务端代码如下：

Code:
<?php //连接数据库 include("../include/dbconn.php"); //接收参数，获取当前页 $nowPage=$_GET['nowPage']; $pageSize=$_GET['pageSize']; //根据当前页，分页查询 $sql="select id,name,p,code,l from area limit ".($nowPage-1)*$pageSize.",".$pageSize; //执行查询操作 $rs=mysql_query($sql); //封装成**数组 $arr =array(); while($rows=mysql_fetch_assoc($rs)){ //每一行数据封装到$arr中，形成的是一个二维数组 $arr[] = $rows; } $arr2=array("nowPage"=>$nowPage,"areas"=>$arr); //arr2("nowPage"=>$nowPage,"areas"=>arr(row("id"=>,"name"=>，....),array("id"=>,"name"=>，....))) //转换成json字符串 echo json_encode($arr2); ?>

以上代码简单清晰，难点在于服务器端如何封装json格式的字符串，但是本文注释比较全了，应该能看明白。

另外，本分页算法只要稍加改动服务器端数据就可以实现，Asp、jsp、.NET的通用。

效果图：