Ajax+Js+Dom+Json无刷新分页技术

最新推荐文章于 2024-09-20 10:40:49 发布

置顶 __GYT

最新推荐文章于 2024-09-20 10:40:49 发布

阅读量1.3k

点赞数

文章标签： json ajax javascript 服务器 function mysql

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) οnclick=getDataPage("+(nowpage-1)+") >上一页</a>";  
   }  
     
   for(var i=startPage;i<=endPage;i++){  
     
     pageStr+=" <a href=javascript:void(0) οnclick=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) οnclick=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 width='20%'>id</th> <th width='20%'>名称</th> <th width='20%'>拼音</th> <th width='20%'>编码</th> <th width='20%'>缩写</th> </tr>";  
   for(var i=0;i<responseObj.areas.length;i++){  
       
       liststr+="<tr> <td align='center'>"+responseObj.areas[i].id+"</td> <td align='center'>"+responseObj.areas[i].name+"</td> <td align='center'>"+responseObj.areas[i].p+"</td> <td align='center'>"+responseObj.areas[i].code+"</td> <td align='center'>"+responseObj.areas[i].l+"</td> </tr>";  
     
   }  
       
   liststr+="</table>";  
     
   //将拼接完成的table字符串 显示在id为list的div中  
   document.getElementById("list").innerHTML=liststr;  
}  
  
  
</script>  
</head>  
  
<body οnlοad="initPage();getDataPage(1);">  
<div id="list" class="list"></div>  
<div id="pageNum" class="pageNum"></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的通用。

效果图：