使用AJAX实现分页

前端  /  管理员 发布于 4年前   318

本文实例为大家分享了AJAX实现分页展示的具体代码，供大家参考，具体内容如下

Fenye.html

<!DOCTYPE html><html><head>  <title>分页</title></head><script type="text/javascript">/*** AJAX* 1.创建ajax对象* 2.建立连接* 3.判断ajax准备状态及状态码* 4.发送请求*/function showList(pageNow){  //创建ajax对象  var xmlHttp = new XMLHttpRequest();  //建立连接  xmlHttp.open('get','./AJAX_Fenye.php?pageNow='+pageNow);  //判断ajax准备状态及状态码  xmlHttp.onreadystatechange = function(){    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {      //alert(xmlHttp.readyState);      document.getElementById('result').innerHTML = xmlHttp.responseText;    }  }  //发送请求  xmlHttp.send(null);}//默认显示第1页window.onload = function(){  showList(1);}</script><body><input type="text"><div id="result">  <!-- 此处显示信息！ --></div></body></html>

Fenye.php 

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>AJAX分页</title></head><body><?php //以下php代码可封装调用，参数为pageNow//链接数据库@mysql_connect('localhost','root','');@mysql_select_db('empmanage');@mysql_query('set name utf8');//获取总记录数$rs = mysql_query('select count(*) from emp');$rows = mysql_fetch_row($rs);$recordCount = $rows[0];//每页显示多少条pageSize$pageSize = 5;//总页数 = 总记录/每页显示多少$pageCount=ceil($recordCount/$pageSize);//获取当前页 三元运算 若不存在pageNow则默认显示第1页$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1;if ($pageNow < 1) {  $pageNow = 1;}elseif ($pageNow > $pageCount) {  $pageNow = $pageCount;}//起始位置 每页从第几条数据显示$pageStart = ($pageNow-1)*$pageSize;//从哪条开始显示，限制每页显示几条$sql = "select * from emp limit $pageStart,$pageSize";//链接数据库$rs = mysql_query($sql);//以上php代码可封装调用，参数为pageNow 返回查询到的数据$rs ?> <table bordercolor="green" border="1">   <tr>     <th>ID</th>     <th>姓名</th>     <th>邮箱</th>     <th>等级</th>   </tr><?php //循环取出数据while ($rows = mysql_fetch_assoc($rs)) { echo "    <tr>      <td>{$rows['id']}</td>      <td>{$rows['name']}</td>      <td>{$rows['email']}</td>      <td>{$rows['level']}</td>     </tr>  ";}?> <tr>   <td colspan='4'>   <?php     //分页页码 调用js中的showList()方法 此处$i=$pageNow       for ($i=1; $i <= $pageCount; $i++) {          echo "<a href = 'javascript:void(0)' onclick = 'showList($i)'>{$i}</a>  ";       }   ?>   </td> </tr> </table></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    js正则表达式基本语法(精粹)
    下一条：
    js正则表达式验证大全(收集)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客