［经验总结］pushState＋ajax应用

在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间做用户主页时用到的pjax。

近期我站的个人主页改版，将用户发布的各类作品放到一个页面上切换，附加筛选功能。
在做筛选及翻页的过程中，我们用到了pjax。即通过ajax获取数据，然后改变url链接，这样用户可以前进后退。就像这样→

上面的二级导航就是筛选用哒～

这个就是翻页。

翻页是由php直接渲染的，所以里面的链接也是php回传的。在筛选之后ajax回传数据里面，也带了翻页的数据，就可以直接添到里面。因为pushState和replaceState不能很好的兼容低版本IE，这里我们用了jquery.history插件，在使用pushState或replaceState的时候触发 'statechange'事件。

因为ajax参数是作为a标签的链接形式写入翻页里，所以在翻页时需要将参数提取出来：

$('.pager').on('click', 'a', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    if (!href) {
        return;
    };

    if ($(this).closest('.pager').hasClass('ajaxPage')) {
        changeState(href);
    } else {
        window.location.href = href;
    };
                
});

先阻止a标签的跳转，然后取出链接。这里有一处判断是否是ajax页，因为页面交互涉及到其他页面跳转过来的情况，所以ajaxPage作为判断［请忽略。。。

接下来就是使用pushState：

var changeState = function changeState(href) {
    var parmas;
    var href = href;
    //取出参数（使用插件）
    href = href.substring(href.indexOf('?'));
    parmas = $.query.parseNew(href).get();
    var subParmas = {
       /* state对象 */
    };
    var subHref;       
    /* 
    各种判断处理
    subHref为url要与后台约定
    */
    History.pushState(subParmas, $('title').text(), subHref);
};

然后等到pushState的时候会触发'statechange'，我们再根据参数ajax取数据，最后呈现出来：

扫描二维码关注公众号，回复： 11269950 查看本文章

//当页面url更新时更新数据
History.Adapter ? History.Adapter.bind(window,'statechange',function(){
    var parmas = History.getState().data,
    $.when($.get(ajaxlink, parmas)).done(function(result) {
        /* 
        各种呈现处理 
        */         
    });
}) : '';

得益于pushState和replaceState的出现，以及jquery.history插件，这几行代码就可以有pjax效果。
嘛～～更多有关于pjax的应用，可以阅读学习浅析Web开发中前端路由实现的几种方式

猜你喜欢