ajax完美实现两个网页 分页功能的实例代码

前端技术 2023/09/01 PHP

分页的首页

复制代码 代码如下:

<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf8\" />
<h1 align=\"center\">武侠小说分页</h>
<br/>
<script src=\"jquery-1.4.2.min.js\"></script>
<script>
var page=\'\';
  function init(page){
  document.getElementById(\"tables\").innerHTML=\'\';
   var xhr;
   if(window.XMLHttpRequest){
 xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
 xhr =new ActiveXObject(\"Microsoft.XMLHTTP\")
}
var url=\"fenye.php\";
 xhr.open(\"POST\",url,true);
 xhr.onreadystatechange=callback;
 xhr.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");
 if(page){
 xhr.send(\"page=\"+page);
 }
 else {xhr.send(\"page=1\");}
 var content;
 function callback(){
   if(xhr.readyState==4){
     if(xhr.status==200){
      var json =eval(\'(\'+xhr.responseText+\')\');
   //alert(xhr.responseText);
  var fenye=json.str;
 //  alert(fenye);
     document.getElementById(\'div\').innerHTML=fenye;
  content=\"<th>ID</th><th>名称</th><th>作者</th><th>出版社</th><th>ISBN号</th><th>类型</th><th>价格</th>\";
  for(var i=0;i<json.info.length;i++){
  content+=\"<tr><td>\"+json.info[i].id+\"</td><td>\"+json.info[i].name+\"</td><td>\"+json.info[i].author+\"</td><td>\"+json.info[i].publisher+\"</td><td>\"+json.info[i].isbn+\"</td><td>\"+json.info[i].type+\"</td><td>\"+json.info[i].price+\"</tr>\";
  document.getElementById(\"tables\").innerHTML=content;
  }
    // alert(fenye);
     }
   }
   }
 }

</script>


<body onLoad=\"init()\">
 <h3 align=\"center\">jquery实现$.ajax的分页</h3>
<table id=\"tables\" style=\" width:500px; height:100px; text-align:center\" align=\"center\" border=\"5\" bordercolor=\"#FF6600\">
<th>ID</th><th>名称</th><th>作者</th><th>出版社</th><th>ISBN号</th><th>类型</th><th>价格</th>
</table>
<table align=\"center\" style=\"margin-top:15px\">
 <tr><td>
 <td style=\"colspan:3;height:20\">
 <div id=\"div\" style=\"position:absolute; left: 447px; top: 218px; width: 411px; height: 22px;\"></div>
 </td>
</tr>
</table>
<br />
</body>

本文地址:https://www.stayed.cn/item/2600

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。