AJAX(二)---局部刷新实现分页效果的实现

来源：互联网发布：ask软件编辑：程序博客网时间：2024/05/16 08:47

## 案例分析

一、无刷新分页

代码较多，当有必要时再进行使用，避免维护困难
无刷新分页，只是局部刷新，整个页面并无刷新，这样不仅可以减少对带宽，服务器的消耗，还可以给用户带来更好的体验。
当无需局部刷新时，使用传统分页即可，便于编写与维护。

1.1 实现步骤

ajax对传统分页效果的封装.
- 先制作传统分页效果，在这里我们借助一个封装好的简单的分页类进行制作，这个分页类的样式使用的是bootstrap的样式，只需要设置几个属性即可。
- 下面是分页类的源码

<?php/** * 分页类 */class Page{    //总的记录数    private $total_rows = 100;    //每页显示的数量, 默认每页显示3条数据    private $pagesize = 3;    //默认当前页为1    private $now_page = 1;    //点击超链接时，跳转的页面    private $url = '';    //分页类的属性设为私有，当为不可访问的属性赋值时，自动调用__set    public function __set($name, $value)    {        if(property_exists($this,$name)){            $this -> $name = $value;        }    }    //当访问不可访问的属性时，自动调用__et    public function __get($name)    {        if(property_exists($this,$name)){            return $this -> $name;        }    }    //该核心方法给我们返回一个具有class="pagination"的ul，bootstrap样式    public function create()    {        //在地址后加上page参数        $url = $this -> url ."&page=";        $first = 1;        if($this -> keyword != ''){            $url = $this -> url ."?keyword={$this -> keyword}&page=";        }        $first_active = $this->now_page == 1 ? 'active' :'';        //创建首页的标签        $page_html = <<<HTML        <ul class="pagination">            <li class="$first_active"><a href="{$url}{$first}">首页</a></li>HTML;        //创建中间的页码数,该创建多少取决于总共有多少页        $count = ceil($this -> total_rows / $this ->pagesize);        //从当前页-3开始，到当前页+3结束        for($i=$this->now_page-3;$i<=$this->now_page+3;$i++){            $active = $this -> now_page == $i ? 'active' : '';            if($i < 2 || $i > $count-1){                continue;            }            $page_html .= <<<HTML            <li class="$active"><a href="{$url}{$i}">$i</a></li>HTML;        }        //创建尾页的标签        $last_active = $this -> now_page == $count ? 'active' :'';        $page_html .= <<<HTML            <li class="$last_active"><a href="{$url}{$count}">尾页</a></li>        </ul>HTML;        //返回拼接好的ul        return $page_html;    }}

接下来通过调用分页类，设置总记录数，地址，每页条数来制作分页，源码如下，bootstrap就不附加了，我使用的版本为3.2.0

<?phprequire_once './Page.class.php';//这里连接数据库$Mysqli = mysqli_connect('localhost','root','wasd','test');//设置字符集$Mysqli->query('SET NAMES utf8');//当前页$page_num = isset($_GET['page'])?$_GET['page']:1;//实例化page类$page_ob = new Page();//获取总记录数,并设置$r_sql = 'SELECT count(*) num FROM emp;';$res = $Mysqli->query($r_sql);$rows = $res->fetch_assoc();$page_ob->total_rows = $rows['num'];//url$page_ob->url = 'page.php';//当前页码$page_ob->now_page= $page_num;//为了效果设置,每页5条$page_ob->pagesize=5;//接收页码ul$page_ul = $page_ob->create();//数据$offset = ($page_num-1)*3;$sql = "SELECT empno,ename FROM emp LIMIT $offset,$page_ob->pagesize";$result =  $Mysqli->query($sql);$arr = [];while ($row = $result->fetch_assoc()) {    $arr[] = $row;}$str= <<<HTML<link style="text/css" rel="stylesheet" href="bootstrap.css"/><table border="1" cellspacing="0" cellpadding="0">    <tr>        <th>员工编号</th>        <th>员工姓名</th>    </tr>HTML;echo $str;foreach ($arr as $v){    echo'<tr>';    echo"<td>".$v['empno']."</td>";    echo"<td>".$v['ename']."</td>";    echo'</tr>';}echo'</table>';echo $page_ul;

那么我们如何实现ajax无刷新分页呢？
我们先制作ajax请求，并在想实现无刷新分页的部分进行获取，输出从PHP文件获得的响应。
把ajax封装到showpage函数中，并通过参数将请求的地址（包括page）传递进去，从而实现ajax无刷新分页。
下面是源码
对分页类中页码地址的部分做出修改如下

 //该核心方法给我们返回一个具有class="pagination"的ul    public function create()    {        $url = $this -> url ."?page=";        $first = 1;        $first_active = $this->now_page == 1 ? 'active' :'';        //创建首页的标签        $page_html = <<<HTML        <ul class="pagination">            <li class="$first_active"><a href="javascript:showpage('{$url}{$first}')">首页</a></li>HTML;        //创建中间的页码数,该创建多少取决于总共有多少页        $count = ceil($this -> total_rows / $this ->pagesize);        //从当前页-3开始，到当前页+3结束        for($i=$this->now_page-3;$i<=$this->now_page+3;$i++){            $active = $this -> now_page == $i ? 'active' : '';            if($i < 2 || $i > $count-1){                continue;            }            $page_html .= <<<HTML            <li class="$active"><a href="javascript:showpage('{$url}{$i}')">$i</a></li>HTML;        }        //创建尾页的标签        $last_active = $this -> now_page == $count ? 'active' :'';        $page_html .= <<<HTML            <li class="$last_active"><a href="javascript:showpage('{$url}{$count}')">尾页</a></li>        </ul>HTML;        //返回拼接好的ul        return $page_html;    }

发送请求获得响应的页面，数据同样是page.php页面的不再附加

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        function showpage(url) {            //ajax无刷新            //1.ajax创建对象            var xhr = new XMLHttpRequest();            //2.监听状态            xhr.onreadystatechange=function()            {                if(xhr.readyState==4)                {                    //获取结果的对象，输出返回数据                   document.getElementById('result').innerHTML = xhr.responseText;                }            };            //发送get请求            xhr.open('get',url);            xhr.send(null);        }       window.onload = function()       {           //传递页码信息，通过page.php的返回页码，实现AJAX无刷新分页          showpage('./page.php?page=1');       }    </script></head><body><h2>ajax无刷新分页</h2>    <div id="result">    </div></body></html>

以上就是实现AJAX无刷新分页的全部源码。

下面就是最终的效果图，每一个页码都调用showpage函数，并传递相应的urL

总结在这里：

AJAX实现无刷新分页的关键在于将每一页的url获得，并更新请求的url，保持一致，这样就可以实时获得请求数据，而仅仅局部刷新。

阅读全文

1 0