［经验总结］pushState＋ajax运用

2019年8月30日 107次阅读 来源: Kathy_Miao

在行将渡过试用期的时刻，藉著本日进修的文章，整顿一下前段时间做用户主页时用到的pjax。

近期我站的个人主页改版，将用户宣布的种种作品放到一个页面上切换，附加挑选功用。
在做挑选及翻页的过程当中，我们用到了pjax。即经由过程ajax猎取数据，然后转变url链接，如许用户能够行进退却。就像如许→

《［经验总结］pushState＋ajax运用》

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

《［经验总结］pushState＋ajax运用》

这个就是翻页。

翻页是由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取数据，末了显现出来：

//当页面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开辟中前端路由完成的几种体式格局

    原文作者：Kathy_Miao
    原文地址: https://segmentfault.com/a/1190000004156526
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞