Cghang

Pjax实现无刷新加载页面
前言前些天浏览到小柯代挂网的前端页面,进去后发现他网站实现了全站无刷新pjax+ajax提交数据,发现这样加载速度...
右键或长按保存图片
26
2018/05

Pjax实现无刷新加载页面

前言
前些天浏览到小柯代挂网的前端页面,进去后发现他网站实现了全站无刷新pjax+ajax提交数据,发现这样加载速度很快,这两天就开始了解了解了。
原理
在两个不同的页面,把内容放在同一个容器当中,然后绑定本页的所有a标签,然后替换旧的容器的内容为新的内容。

<section id="container">
    </section>

通过返回的html替换掉标签内的内容
实现方法

/*** PJAX a标签***/
$(document).pjax('a[data-pjax]', '#container',{  
       type:'get',
       scrollTo:false,
       timeout: 20000,
   });
    /*** PJAX 主动调用***/
function pjax(url) {
        if(url){
            $.pjax({url:url,container:'#container',scrollTo:false,timeout:20000,});
        }else{
            $.pjax.reload({container:'#container',scrollTo:false,timeout:20000,});
        }
    }

还需引用以下

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="pjax.js"></script>

调用

    <a href="地址" data-pjax>
Last modification:May 30th, 2018 at 08:46 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment