ajax分页

来源：互联网发布：矩阵测光模式编辑：程序博客网时间：2024/04/28 08:43

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       *{
           margin:0;
           padding:0;
       }
       i{
           font-style: normal;
           display:inline-block;
           width:31px;
           height:31px;
           font:bold 18px/31px "微软雅黑";
           text-align:center;

       }
       h1{
           text-align:center;
           margin-bottom:20px;
       }
       li{
           background-color:gold;
           margin-bottom:20px;
       }
       .pagination{
           text-align:center;
       }
       .pagination a{
           border:1px solid red;
           text-decoration: none;
           display: inline-block;
           width:30px;
           height:30px;
           font:bold 18px/30px "微软雅黑";
           margin-left:10px;


          }
          .pagination a:hover{
              background-color: gold;
          }
          .pagination a.active{
              background-color: none;
              border:none;
          }
    </style>
   <script src="ourAjax.js"></script>
   <script>
       // page = 1
       //start:起始页码   end表示终止页码
       //'[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]

       var currentPage = 1;

       window.onload = function(){
           var pagination = document.getElementById('pagination');
           var ulList = document.getElementById('ulList');
           ajax({                          //页面加载完毕后请求服务器数据
                       method:"get",
                       url:"fenye.php",
                       data:{page:1},      //请求服务器数据page:1 成功返回[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]
                       success:function(datas){
                           //console.log(datas);
                           var arr = eval(datas);//数据请求成功后将返回的数据转化为可正常使用的数组若返回为json对象用JSON.parse()方法
                            //console.log(arr[0].data);
                            alert(arr);
                           crateDataInHTML(arr[0].data);//创建html页面元素利用请求得到的arr[0].data数据作为实参调用创建html结构的函数
                           //创建页面条
                           createPagation(arr[0].start,arr[0].end);//创建页面条实参为start end
                       },
                       error:function(mes){
                           alert(mes);
                       }
                   });

           /*创建页码条*/
       }


       function createPagation(start,end){
           var html = '';
           for(var i = start;i<=end;i++){
               if(currentPage==i){
                   html+='<i class="active" href="javascript:">'+i+'</i>';
               }else{
                   html+='<a href="javascript:" onclick="goPage('+i+')">'+i+'</a>';//创建a标签的同时执行点击执行goPage(i)函数 i 为实参
               }
           }
           pagination.innerHTML = html;
       }

       function crateDataInHTML(arr){
           ulList.innerHTML = '';
           for(var i = 0;i<arr.length;i++){
               var item = arr[i];
               var li = document.createElement("li");
               li.innerHTML = '<h2>' +
                       '<a href="#">'+item.title+'</a>' +
                   '</h2>' +
                   '<p>'+item.desc+'</p>';
               ulList.appendChild(li);
           }
       }

       function goPage(p){//提交数据 page:p p=i=currentPage 请求点击当前页面的服务器数据   获得数据后执行创建调用函数操作//同上

           currentPage = p;
           ajax({
               method:"get",
               url:"fenye.php",
               data:{page:p},
               success:function(datas){
                   //console.log(datas);
                   var arr = eval(datas);
                   //console.log(arr[0].data);
                   crateDataInHTML(arr[0].data);
                   //创建页面条
                   createPagation(arr[0].start,arr[0].end);
               },
               error:function(mes){
                   alert(mes);
               }
           });
       }

   </script>

</head>
<body>
   
   <div>
       <h1>数据列表</h1>
   </div>
   
   <div>
       <ul id="ulList">

           <li>
               <h2>
                   <a href="#">数据1</a>
               </h2>
               <p>数据1描述数据1描述数据1描述</p>
           </li>
           <li>
               <h2>
                   <a href="#">数据1</a>
               </h2>
               <p>数据1描述数据1描述数据1描述</p>
           </li>
           <li>
               <h2>
                   <a href="#">数据1</a>
               </h2>
               <p>数据1描述数据1描述数据1描述</p>
           </li>
           <li>
               <h2>
                   <a href="#">数据1</a>
               </h2>
               <p>数据1描述数据1描述数据1描述</p>
           </li>

       </ul>
       <div id="pagination" class="pagination">

           <a href="javascript:">1</a>
           <a href="javascript:">1</a>
           <i class="active" href="javascript:">1</i>
           <a href="javascript:">1</a>
           <a href="javascript:">1</a>
           <a href="javascript:">1</a>
           <a href="javascript:">1</a>

       </div>
   </div>

</body>

</html>

/*引用的封装js*/

/*
   实现ajax的工具
   参数：
       method:请求方式
       url:请求的地址
       isAsyc: 是否异步 true,异步。false,同步。
       data: 表示传入的数据
       success:function(data){

       },
       error:function(message){}

       //{} key:value
       o = {method:"get"}
       {}

       {
           method:"",
           url:"",
           isAsyc:true,

           data:{
                   userName:"admin",
                   pwd:"123",
                   gender:true
           }
           success:function(){}
           error:function(){}

       }
*/
function ajax(o){
   var xr; //创建ajax对象
   if(window.XMLHttpRequest){
           xr = new XMLHttpRequest(); //创建ajax对象
   }else{
       xr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   if(o.isAsyc==undefined){//若没有传isAsyc 默认为异步提交
       o.isAsyc = true;
   }
   var params = getParames(o.data);
   if(o.method.toLowerCase()=="get"){ //get   请求
       var date = new Date();
       var time = date.getTime();

       //&userName=admin&ped=123
       xr.open(o.method,o.url + "?num=" + time + "&" + params,o.isAsyc);
       xr.send();
   }else{ //post请求
       xr.open(o.method,o.url,o.isAsyc);
       xr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交
       xr.send(params);
   }

   if(o.isAsyc){ //异步需要监听事件
       xr.onreadystatechange = function(){
               if(xr.readyState==4){   //表示接受（会话）成功！并且数据完全解析成功！
                   if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
                       //success 函数 data
                       o.success(xr.responseText);


                   }else{
                       //xr.statusText   状态信息
                       o.error(xr.status + "-" + xr.statusText);
                       //alert(xr.status + "-" + xr.statusText);
                   }

               }
           }
   }else{ //同步
       if(xr.readyState==4){   //表示接受（会话）成功！并且数据完全解析成功！
                   if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
                       //success 函数 data
                       o.success(xr.responseText);


                   }else{
                       //xr.statusText   状态信息
                       o.error(xr.status + "-" + xr.statusText);
                       //alert(xr.status + "-" + xr.statusText);
                   }

       }
   }

}

/*
   提交数据格式处理
*/
function getParames(params){
   //userName=admin&ped=123&
   var strFormat = '';
   for(var property in params){
       //key property
       //value params[property]
       strFormat = strFormat + property + "=" + params[property] + "&";
   }
   return strFormat.slice(0,strFormat.length-1);
}

/*请求的php文件*/

<?php
   header("Content-type: text/html; charset=utf-8");
   //print_r $_POST[pwd];
   $r=(string)rand(1,100000);
   if($_GET["page"]=="1"||$_GET["page"]=="2"||$_GET["page"]=="3"||$_GET["page"]=="4"||$_GET["page"]=="5"||$_GET["page"]=="6"){
       echo '[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="7"){
       echo '[{start:2,end:11,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="8"){
       echo '[{start:3,end:12,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="9"){
       echo '[{start:4,end:13,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="10"){
       echo '[{start:5,end:14,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="11"){
       echo '[{start:6,end:15,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="12"){
       echo '[{start:7,end:16,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="13"){
       echo '[{start:8,end:17,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="14"){
       echo '[{start:9,end:18,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="15"){
       echo '[{start:10 ,end:19,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }
   if($_GET["page"]=="16"||$_GET["page"]=="17"||$_GET["page"]=="16"||$_GET["page"]=="18"||$_GET["page"]=="19"||$_GET["page"]=="20"){
       echo '[{start:11 ,end:20,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
   }



   //echo $_GET["txt"];
?>

0 0