ajax php 分页感触 - xiaokun

前几天试着做了一个分页，从网上看到了一种许多人都在转载的例子，下面贴出来让大家看看

  1 <?php 
  2  header('Content-type: text/html ;charset = utf-8');
  3 ?>
  4 <html>
  5     <head>
  6         <title>ajax分页演示</title>
  7         <style type='text/css'>
  8             /* CSS Document */
  9             #result ul li {
 10                 height: 20px;
 11                 width: auto;
 12                 display: block;
 13                 color: #999;
 14                 border: 1px solid #999;
 15                 float: left;
 16                 list-style: none;
 17                 font-size: 12px;
 18                 margin-left: 5px;
 19                 line-height: 20px;
 20                 vertical-align: middle;
 21                 text-align: center;
 22             }
 23             
 24             #result ul li a:link {
 25                 width: 50px;
 26                 height: 20px;
 27                 display: block;
 28                 line-height: 20px;
 29                 background: #09C;
 30                 border: 1px solid #fff;
 31                 color: #fff;
 32                 text-decoration: none;
 33             }
 34             
 35             #result ul li a:hover {
 36                 width: 50px;
 37                 height: 20px;
 38                 display: block;
 39                 line-height: 20px;
 40                 background: #09C;
 41                 border: 1px solid #fff;
 42                 color: #F60;
 43                 text-decoration: none;
 44             }
 45         </style>
 46         <script type="text/javascript" src="ajax_jquery.js">
 47         </script>
 48         <script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
 49     </head>
 50     <body>
 51         <div id="result">
 52             <?php 
 53             $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
 54             $num = 5; //  每页显示10条数据
 55             $db = mysql_connect("localhost", "root", "root");
 56             mysql_select_db("db_s8s");
 57             /**
 58              *
 59              首先咱们要获取数据库中到底有多少数据，才能判断具体要分多少页，具体的公式就是
 60              总数据库除以每页显示的条数，有余进一。
 61              也就是说10/3=3.3333=4 有余数就要进一。*/
 62             $result = mysql_query("SELECT * FROM S8S_SOURCE_COMMENT");
 63             $total = mysql_num_rows($result);
 64             
 65             $url = 'test.php';
 66             
 67             //页码计算
 68             $pageNum = ceil($total / $num); //ceil -- 进一法取整  获得总页数，也是最后一页的页数
 69             $page = min($pageNum, $page); //首页
 70             $prePage = $page - 1; //
 71             $nextPage = ($page == $pageNum ? 0 : $page + 1);
 72             $offset = ($page - 1) * $num; //获取limit的第一个参数的值，假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。
 73             
 74             //开始分页导航代码
 75             $pageNav = "显示第<B>".($total ? $offset + 1 : 0)."</B>-<B>".min($offset + $num, $total)."</B> 条记录，共 ".$total."条记录 ";
 76             //如果就有一页，跳出函数
 77             if ($pageNum <= 1) {
 78                 return false;                }
 79 
 80             $pageNav .= "<a href=javascript:dopage('result','$url?page=1');>首页</a>";
 81             if ($prePage) {
 82                 $pageNav .= "<a href=javascript:dopage('result','$url?page=$prePage');>前页</a>";
 83             } else {
 84                 $pageNav .= "前页";
 85             }
 86             if ($nextPage) {
 87                 $pageNav .= "<a href=javascript:dopage('result','$url?page=$nextPage');>后页</a>";
 88             } else {
 89                 $pageNav .= "后页";
 90             }
 91             $pageNav .= "<a href=javascript:dopage('result','$url?page=$pageNum');>尾页</a>";
 92             $pageNav .= "</select>页,共 $pageNum 页";
 93             
 94             if ($page > $pageNum) {
 95                 echo "Error : Can not Find The Page".$page;
 96                 Exit;
 97             }
 98             //获取相应页数所需要显示的数据
 99             $info = mysql_query("SELECT * FROM S8S_SOURCE_COMMENT LIMIT $offset,$num");
100             while ($it = mysql_fetch_array($info)) {
101                         echo $it['scid'];
102                     //echo json_encode(array('scid'=>$it['scid']));
103                 echo "</br>";
104             }
105             echo "</br>";
106             echo $pageNav;//输出分页导航
107             ?>
108         </div>
109     </body>
110 </html>

下面是对应的js部分

var http_request=false;
  function send_request(url){//初始化，指定处理函数，发送请求的函数
    http_request=false;
    //开始初始化XMLHttpRequest对象
    if(window.XMLHttpRequest){//Mozilla浏览器
     http_request=new XMLHttpRequest();
     if(http_request.overrideMimeType){//设置MIME类别
       http_request.overrideMimeType("text/xml");
     }
    }
    else if(window.ActiveXObject){//IE浏览器
     try{
      http_request=new ActiveXObject("Msxml2.XMLHttp");
     }catch(e){
      try{
      http_request=new ActiveXobject("Microsoft.XMLHttp");
      }catch(e){}
     }
    }
    if(!http_request){//异常，创建对象实例失败
     window.alert("创建XMLHttp对象失败！");
     return false;
    }
    http_request.onreadystatechange=processrequest;
    //确定发送请求方式，URL，及是否同步执行下段代码
    http_request.open("GET",url,true);
    http_request.send(null);
  }
  //处理返回信息的函数
  function processrequest(){
   if(http_request.readyState==4){//判断对象状态
     if(http_request.status==200){//信息已成功返回，开始处理信息
      document.getElementById(reobj).innerHTML=http_request.responseText;
     }
     else{//页面不正常
      alert("您所请求的页面不正常！");
     }
   }
  }
  function dopage(obj,url){
 //  document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在读取数据...</font>";
   send_request(url);
   reobj=obj;
   }

对于此，可以利用简单的jQuery搞定，当然这并不是我想说的。。。

/**
 * @author sky
 */
function dopage(obj,url){
    $.ajax({
        type:"GET",
        url:url,
        success:function(data){
            $('#'+obj).html(data);
//            $('#'+obj).html("正在加载数据.....");
        }
    });
}　　　　

如果大家仔细想想就可以发现，当然这也是我的同学告诉我的，呵呵，其实这个例子并不是真正的异步刷新，从firebug里面大家可以看到
每一次的请求所对应的响应的内容是html内容，然后将响应的全部数据更新到div里面，其实还和刷新页面的效果是一个样子的。。。

学习中的。。。。。。鸟。。。。。。

posted on 2011-04-22 16:37 xiaokun 阅读(589) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部