ajax无刷新前后退问题

浏览:318 发布日期:2018/11/07 分类:前端开发 关键字: ajax 前后退
昨天刚刚看了pjax;看了文档的说明,以及在网上搜索了一些,得到了一些结论:
pjax:更改url,局部刷新页面,请求的数据必须是html代码片段【tp5中可以使用view()输出数据】
ajax:不更改url,局部刷新页面,请求数据可以是jsop,html...
比较两者,pjax可以进行前后退,ajax不能前后退,
于是查了一下,【ajax 前后退问题】
得到结论,动手自己写一个:
还没写好搜索的,先记录一下;
刚好用了hui前端框架,不过好像官方的文档有些旧,有些事件,我只好使用jquery.ui.js,和jquery.cookie.js;正题:
首先使用ajax向后端请求数据,并输出分页数据,【这里我用了选项卡[两个选项:分别是权限组,权限表],也就是我的页面在不同的选项卡之间有不同的分页的数据】
这里顺便说一下,我复制了官方paginator的驱动Bootstrap驱动,改了里面的分页标签样式【为了ajax无刷新,去除了a中的href,增加页码属性[data-page],给上下页增加页码属性[data-page]】,放在扩展类库中。
其中使用了window.onload 和window.onhashchange<div id="auth-group"></div>
<div id="auth-list"></div>
<script>
//选项卡切换
    $(function () {
        $('#tab_demo').Huitab({
            tavBar: '.tabBar span',
            tabCon: '.tabCon',
            className: 'current',
            tabEvent: 'click',
            index: 0
        });
//搜索词提示,直接使用file缓存的数据
        var authGroup = [];
        $.post("get_auth_group_title.html",{},function (data) {
            for(var i = 0; i<data.length; i++)
            {
                authGroup.push(data[i].title);
            }
        });

        $("#search-auth-group").autocomplete({
            source: authGroup
        });

        
     //当用户第一次进入页面时,判断是否有hash值
        if(location.hash.indexOf("auth-list-page")>0)
        {
            getAuthGroupPage(1);
            var authListPage = location.hash.replace("#auth-list-page=", "");
            authListPage = parseInt(authListPage);
            if( isNaN(authListPage)) authListPage = 1;
            getAuthListPage(authListPage);

        }else if(location.hash.indexOf("auth-group-page")>0){
            getAuthListPage(1);
            var authGroupPage = location.hash.replace("#auth-group-page=", "");
            authGroupPage = parseInt(authGroupPage);
            if( isNaN(authGroupPage)) authGroupPage = 1;
            getAuthGroupPage(authGroupPage);

        }else{
            getAuthListPage(1);
            getAuthGroupPage(1);
        }

        $("#auth-group").on("click", '.auth-group-page ul li a' ,function () {
            authGroupPage = $(this).attr("data-page");
            getAuthGroupPage(authGroupPage);

        });

        $("#auth-list").on("click", '.auth-list-page ul li a' ,function () {
            authListPage = $(this).attr("data-page");
            getAuthListPage(authListPage);
    });

        window.onload = function () {
            getAuthGroupPageHash();
            getAuthListPageHash();
            getTabBarHash();
        };
        window.onhashchange = function(){
            getAuthGroupPageHash();
            getAuthListPageHash();
            getTabBarHash();
        };



    });

    //ajax前后退时,选项卡的切换
    var getTabBarHash = function () {
        if(location.hash.indexOf("auth-list-page")>0)
        {
            $(".tabBar span:nth-child(2)").click();
        }else{
            $(".tabBar span:first-child").click();
        }
    }

    //权限组:ajax请求新的分页内容,同时定义新的hash,以及当前页码的cookie[cookie用于避免重复加载同一个分页请求]
    var getAuthGroupPage = function (page) {
        $.get("auth_group.html",{page:page,title:""},function (data) {
            $("#auth-group").html(data);
            if(page != 1) location.hash = "#auth-group-page=" + page;
            $.cookie('auth-group-page', page, { expires: 1 });
        });
    }

    //权限表:ajax请求新的分页内容,同时定义新的hash,以及当前页码的cookie[cookie用于避免重复加载同一个分页请求]
    var getAuthListPage = function (page) {
        $.get("auth_list.html",{page:page,title:""},function (data) {
            $("#auth-list").html(data);
            if(page != 1) location.hash = "#auth-list-page=" + page;
            $.cookie('auth-list-page', page, { expires: 1 });
        });
    }

    //权限组的hash变化时触发事件
    var getAuthGroupPageHash = function () {
        var authGroupPage = location.hash.replace("#auth-group-page=", "");
        authGroupPage = parseInt(authGroupPage);
        if( isNaN(authGroupPage)) authGroupPage = 1;
        //避免重复加载,使用cookie记录当前的page是否改变
        if(authGroupPage == $.cookie('auth-group-page')) return;
        if(location.hash.indexOf("auth-group-page")>0)
        {
            if (authGroupPage) getAuthGroupPage(authGroupPage);
        }
    }

    //权限表的hash变化时触发事件
    var getAuthListPageHash = function () {
        var authListPage = location.hash.replace("#auth-list-page=", "");
        authListPage = parseInt(authListPage);
        if( isNaN(authListPage)) authListPage = 1;
        //避免重复加载,使用cookie记录当前的page是否改变
        if(authListPage == $.cookie('auth-list-page')) return;
        if(location.hash.indexOf("auth-list-page")>0)
        {
            if(authListPage) getAuthListPage(authListPage);
        }

    }

</script>
<?php
/**
 * Created by ahai
 * Time: 2018/11/6 0006 上午 10:53
 * Email: <764882431@qq.com
 * 修改think\paginator\driver\Bootstrap驱动;
 * 无刷新分页
 */
namespace page;

use think\Paginator;

class Page extends Paginator
{

    /**
     * 上一页按钮
     * @param string $text
     * @return string
     */
    protected function getPreviousButton($text = "«")
    {

        if ($this->currentPage() <= 1) {
            return $this->getDisabledTextWrapper($text);
        }

        $url = $this->url(
            $this->currentPage() - 1
        );

        return $this->getPageLinkWrapper($url, $text, $this->currentPage() - 1);
    }

    /**
     * 下一页按钮
     * @param string $text
     * @return string
     */
    protected function getNextButton($text = '»')
    {
        if (!$this->hasMore) {
            return $this->getDisabledTextWrapper($text);
        }

        $url = $this->url($this->currentPage() + 1);

        //return $this->getPageLinkWrapper($url, $text);
        //下一页,增加一个页码参数,便于前端ajax
        return $this->getPageLinkWrapper($url, $text, $this->currentPage() + 1);
    }

    /**
     * 页码按钮
     * @return string
     */
    protected function getLinks()
    {
        if ($this->simple) {
            return '';
        }

        $block = [
            'first'  => null,
            'slider' => null,
            'last'   => null,
        ];

        $side   = 3;
        $window = $side * 2;

        if ($this->lastPage < $window + 6) {
            $block['first'] = $this->getUrlRange(1, $this->lastPage);
        } elseif ($this->currentPage <= $window) {
            $block['first'] = $this->getUrlRange(1, $window + 2);
            $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
        } elseif ($this->currentPage > ($this->lastPage - $window)) {
            $block['first'] = $this->getUrlRange(1, 2);
            $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
        } else {
            $block['first']  = $this->getUrlRange(1, 2);
            $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
            $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
        }

        $html = '';

        if (is_array($block['first'])) {
            $html .= $this->getUrlLinks($block['first']);
        }

        if (is_array($block['slider'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['slider']);
        }

        if (is_array($block['last'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['last']);
        }

        return $html;
    }

    /**
     * 渲染分页html
     * @return mixed
     */
    public function render()
    {
        if ($this->hasPages()) {
            if ($this->simple) {
                return sprintf(
                    '<ul class="pager">%s %s</ul>',
                    $this->getPreviousButton(),
                    $this->getNextButton()
                );
            } else {
                return sprintf(
                    '<ul class="pagination">%s %s %s</ul>',
                    $this->getPreviousButton(),
                    $this->getLinks(),
                    $this->getNextButton()
                );
            }
        }
    }

    /**
     * 生成一个可点击的按钮
     *
     * @param  string $url
     * @param  int    $page
     * @param  int    $prevNextPage 上下页码
     * @return string
     */
    protected function getAvailablePageWrapper($url, $page, $prevNextPage = 0)
    {
        //return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';
        if($prevNextPage == 0)
        {
            return '<li><a data-page="' . $page . '">' . $page . '</a></li>';
        }else{
            return '<li><a data-page="' . $prevNextPage . '">' . $page . '</a></li>';
        }

    }

    /**
     * 生成一个禁用的按钮
     *
     * @param  string $text
     * @return string
     */
    protected function getDisabledTextWrapper($text)
    {
        return '<li class="disabled"><span>' . $text . '</span></li>';
    }

    /**
     * 生成一个激活的按钮
     *
     * @param  string $text
     * @return string
     */
    protected function getActivePageWrapper($text)
    {
        return '<li class="active"><span>' . $text . '</span></li>';
    }

    /**
     * 生成省略号按钮
     *
     * @return string
     */
    protected function getDots()
    {
        return $this->getDisabledTextWrapper('...');
    }

    /**
     * 批量生成页码按钮.
     *
     * @param  array $urls
     * @return string
     */
    protected function getUrlLinks(array $urls)
    {
        $html = '';

        foreach ($urls as $page => $url) {
            $html .= $this->getPageLinkWrapper($url, $page);
        }

        return $html;
    }

    /**
     * 生成普通页码按钮
     *
     * @param  string $url
     * @param  int    $page
     * @return string
     */
    protected function getPageLinkWrapper($url, $page, $prevNextPage = 0)
    {
        if ($this->currentPage() == $page) {
            return $this->getActivePageWrapper($page);
        }

        return $this->getAvailablePageWrapper($url, $page, $prevNextPage);
    }

    /**
     * 获取当前分页的内容
    */
    public function getPageList()
    {
        $pageList = [];
        for($i=0;$i<$this->listRows;$i++){
            $start = $_GET['page']*$this->listRows - $this->listRows;
            if(!$this->offsetExists($start+$i))
                break;
            $pageList[$i] = $this->offsetGet($start+$i);
        }
        return $pageList;
    }
}
 /**权限组分页*/
    public function authGroup()
    {
        $auth = new Auth;
        $this -> assign('authGroup',$auth -> getAuthGroup(1));
        //return $this -> fetch("manager/authGroup");
        return view("manager/authGroup");
    }

    /**权限表分页*/
    public function authList()
    {
        $auth = new Auth;
        $this -> assign('authList',$auth -> getAuthList());
        //return $this -> fetch("manager/authList");
        return view("manager/authList");
    }
说明一下:使用的是缓存的数据(array),进行单一条件模糊查询,还可以,多条件,太复杂了,不好使用缓存的array进行查询,故有得到一个想法:只有单一条件可以使用缓存数据进行分页,多条件太麻烦,还是直接连接数据库进行分页/**输出分页结果
     * return array
    */
    public function getAuthGroup($listRows = 10, $options = [])
    {
        return $this->getAuthPage($this->getAuthGroupCache(), $listRows, $options);
    }

    /**输出分页结果
     * return array
     */
    public function getAuthList($listRows = 10, $options = [])
    {
        return $this->getAuthPage($this->getAuthListCache(), $listRows, $options);
    }
结果:ajax局部刷新数据,对不同选项卡点击【任意切换】,同时任意点击页码。---->结果来看,目前还是比较完美的,可以进行前后退,当前页面的数据会进行更新,并根据hash值在不同选项卡中切换到当前hash值下的内容页面。

记录到此结束。
最佳答案
评论( 相关
后面还有条评论,点击查看>>