整合pjax无刷新翻页加载教程

  • 内容
  • 相关

Pjax局部无刷新技术教程 - by:鬼少

想了想,还是不把pjax写到播放器里面了。因为,两个东西都不是必需品;而且pjax有很多小问题,会影响播放器的正常使用也说不定;单独发布一个pjax教程吧


我写的教程从来不说废话,所以直接进入重点。所以“有关什么是pjax和pjax有什么用”的问题,请自行百度!


一:整合pjax的准备工作;

    检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入

1.新浪CDN提速:
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
2.下载本地化jq:(本文底部)
<script type="text/javascript" src="....自己写...../jquery.js"></script>

    1.7.0版本以上的才有pushState的封装。


二:开始整合Pjax;

     1.下载pjax.js (本文底部);

     2.在你喜欢的位置(最好body代码结束前)引入pjax.js;


三:使用pjax;

    编辑模版footer.php在</body>标记结束前插入:

<script>
    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>

    这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换contentleft的容器的内容为新内容contentleft,ajax超时时间8秒;

    OK,因为每个模版的替换区不同,修改掉contentleft容器,保存。

    现在看看,是否可以无刷新加载了?

四:解决pjax的缓冲--加入等待动画;

    pjax.js提供了两个接口;

<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
});
</script>

    当然要为pjax_loading定义css,这里就不多说了。

五:解决pjax之后,容器中一些jq事件失效的问题;

    问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

    问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

    解决方法:利用pjax的加载完成回调函数,重新绑定事件。

    例:

<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
	var dus=$(".ds-thread");
	if($(dus).length==1){
		var el = document.createElement('div');
		el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
		el.setAttribute('data-url',$(dus).attr("data-url"));
		DUOSHUO.EmbedThread(el);
		$(dus).html(el);
	}
}
</script>

    OK,我们发现多说可以正常载入了。

六:全部代码汇总一下,就是这样:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="你的域名/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
    pajx_loadDuodsuo();
});
function pajx_loadDuodsuo(){
	var dus=$(".ds-thread");
	if($(dus).length==1){
		var el = document.createElement('div');
		el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
		el.setAttribute('data-url',$(dus).attr("data-url"));
		DUOSHUO.EmbedThread(el);
		$(dus).html(el);
	}
}
</script>

七:发一下牢骚;

    有些人找别人帮忙,理直气壮,牛逼哄哄。

    我只想说:不帮忙是本分,帮忙是情分,请注意自己扮演的角色,不要找不自在。

    如果还有谁不懂的,请联系右上角QQ,能帮忙就帮。别问我为什么,我任性!


本文所需要的资料下载链接: http://pan.baidu.com/s/1ntMbRy5 密码: o648

本文标签:

版权声明:若无特殊注明,本文皆为《鬼少》原创,转载请保留文章出处。

本文链接:整合pjax无刷新翻页加载教程 - http://tv1314.com/post-233.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

154条评论
  1. avatar

    小木鱼 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

    表情 阿斯达斯

    广西来宾市象州县 电信

    1. 鬼少 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

      回复了小木鱼:皮

      广东省深圳市 电信

  2. avatar

    xq Lv.1 Chrome 63.0.3239.108 Chrome 63.0.3239.108 Windows Windows 回复

    博主,想问一下那个pjax回调要改什么东西嘛,我加了你这个回调函数还是不行,麻烦问一下,我实在不知道该改什么,谢谢了

    山东省青岛市 联通

    1. avatar

      Sueer-T.M Lv.1 Chrome 61.0.3163.100 Chrome 61.0.3163.100 Windows Windows 回复

      我来看看文章学习一下

      浙江省杭州市 电信

      1. avatar

        颜涛 Lv.1 Chrome 61.0.3163.100 Chrome 61.0.3163.100 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        遇到此问题:进入文章页的时候,等待动画一直存在,不可去掉,https://www.yankj.com

        江苏省南京市 电信

        1. avatar

          PJAXXXX Lv.1 Chrome 61.0.3163.100 Chrome 61.0.3163.100 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          A页面局部刷新到B页面,但是点击后退按钮回退A页面,A页面的所有点击之类的特效不能用了,请问这是什么问题

          广东省深圳市 移动

          1. avatar

            阳光满溢 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows Windows 回复

            先马克,晚上回去看。

            江苏省南京市 电信

            1. avatar

              Ricky.D. Lv.1 QQbrowser QQbrowser Android 5.1 Android 5.1 回复

              内容简洁精炼!直接讲了重点~支持博主,谢谢了

              上海市 电信

              1. avatar

                mashiro Lv.1 Chrome 60.0.3112.90 Chrome 60.0.3112.90 Windows Windows 回复

                按照上面教的做了,但是出现了链接直接打不开的问题。。

                美国

                1. avatar

                  lestat Lv.1 回复

                  你好,我想请教一个问题,我在laravel上写了一个pjax的demo,但是遇到一个问题,我页面的title是放到一个input hidden里面的,然后每次pjax请求的时候这个值会变化,我这边就用js去更新title标签的内容,但是这样做有个问题,就是当我用浏览器的前进或者后退的时候这个title的值不会发生变化,对于这个问题有什么建议的解决方法吗?非常感谢!!

                  四川省成都市 电信

                  1. 鬼少 回复

                    回复了lestat:利用pjax的回调函数,在pjax执行完成之后再执行你所谓的js去更新title标签,就可以了

                    广东省深圳市福田区 电信

                  2. lestat Lv.1 回复

                    回复了鬼少:感谢大神,我去试试!

                    四川省成都市 电信

                2. avatar

                  z Lv.1 回复

                  着不放弃不给力啊

                  广东省广州市 联通

                  1. z Lv.1 回复

                    回复了z:为什么播放总是 undefine

                    广东省广州市 联通

                  2. 鬼少 回复

                    回复了z:什么环境

                    广东省深圳市 电信

                3. avatar

                  倾城博客 Lv.3 回复

                  鬼少你好,我想请教一下,假如我用pjax点击了a页面的链接以后,载入了b页面的内容,但是地址栏是b页面的地址,下次打开的时候自然也是b页面的地址,但是只有b页面的内容,a页面的内容都没有了,这个怎么解决的?

                  上海市 电信

                  1. 鬼少 回复

                    回复了倾城博客:点击a页面链接载入b页面内容 逻辑错误?

                    广东省深圳市 电信

                  2. 倾城博客 Lv.3 回复

                    回复了鬼少:用pjax的话确实可以达到局部刷新的效果,但是如果这时候按F5刷新,就会跳转到内容页面,也就说原来不变的内容没了,请问大神是怎么解决这个问题的

                    我的问题跟他一样,能写个demo出来吗,弄了很久都没弄好

                    上海市 电信

                  3. 鬼少 回复

                    回复了倾城博客:内容页也得有header footer这些。因为是pjax,而不是ajax。

                    广东省深圳市 电信

                  4. 倾城博客 Lv.3 回复

                    回复了鬼少:已解决,没注意到fragment这个参数,这个应该是被载入页面的容器吧?

                    上海市 电信

                  5. 鬼少 回复

                    回复了倾城博客:是的。

                    广东省深圳市 电信

                4. avatar

                  笛声 Lv.1 回复

                  我也遇到这么一个奇人,38岁了,找我解决linux问题,一直催,速度一点,好了没有。。。 我也是相当无语。

                  浙江省绍兴市 电信

                  1. 鬼少 回复

                    回复了笛声:这种人好老火哟

                    广东省深圳市 电信

                5. avatar

                  唐先森 Lv.1 Chrome 55.0.2883.95 Chrome 55.0.2883.95 Mac OS X 10.12.2 Mac OS X 10.12.2 回复

                  干的漂亮

                  内蒙古赤峰市 联通

                  1. avatar

                    Lv.1 Chrome 53.0.2785.116 Chrome 53.0.2785.116 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                    又遇到个问题,我的pjax:complete这个函数会走两遍,请求页面也是走了两遍,第一遍请求的状态码是canceled,

                    浙江省杭州市 联通

                    1. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      啊?

                      广东省深圳市宝安区 电信

                  2. avatar

                    Weic Lv.1 Chrome 54.0.2840.99 Chrome 54.0.2840.99 Windows Windows 回复

                    博主你好,我加了pjax后点击第二次链接的时候控制台就提示
                    VM754:1 Uncaught TypeError: $(...).pjax is not a function(…)
                    而且pjax就回失效;但是用这个插件官网的外链jquery就不会出错,把插件官网的jquery下载到本地后又会出错;
                    你可以你帮我看看吗,我的网址是https://weic96.cn 谢谢

                    甘肃省兰州市 移动

                    1. 鬼少 Chrome 52.0.2743.116 Chrome 52.0.2743.116 Windows 7 Windows 7 回复

                      jq插件被多次引入的结果。

                      广东省深圳市 联通

                    2. Weic Lv.1 Chrome 54.0.2840.99 Chrome 54.0.2840.99 Windows Windows 回复

                      解决了,非常感谢 [嘻嘻]

                      甘肃省兰州市 移动

                  3. avatar

                    在你身边 Lv.1 Sogou Explorer Sogou Explorer Windows Windows 回复

                    用了pjax之后,,我所跳转的页面的js函数不执行了,请问这是为什么呢

                    河南省郑州市 联通

                    1. 在你身边 Lv.1 Sogou Explorer Sogou Explorer Windows Windows 回复

                      也就是说pjax从a页面加载b页面,而b页面的js不执行

                      河南省郑州市 联通

                    2. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      请看第四段。

                      广东省深圳市 电信

                    3. 在你身边 Lv.1 Sogou Explorer Sogou Explorer Windows Windows 回复

                      3Q,受了启发
                      var script = document.createElement("script");
                      script.src = '/CG/js/itemTable.js';
                      var body = document.body;
                      body.insertBefore(script, body.firstChild);
                      直接添加到body算了

                      河南省郑州市 联通

                    4. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      解决方法很多种 看哪种方便了。

                      广东省深圳市 电信

                    5. 在你身边 Lv.1 Sogou Explorer Sogou Explorer Windows Windows 回复

                      不好意思,还有一个问题,,就是怎么在 $(document).on('pjax:complete', function (){}方法中,获取pjax跳转的a标签的href

                      河南省郑州市 联通

                    6. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      window.location.href

                      广东省深圳市 电信

                  4. avatar

                    水手知明 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

                    大神,你好,请教下pjax的整页面刷新问题是如何解决的,求demo

                    福建省福州市 电信

                    1. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      什么问题?

                      广东省深圳市 电信

                    2. 水手知明 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

                      用pjax的话确实可以达到局部刷新的效果,但是如果这时候按F5刷新,就会跳转到内容页面,也就说原来不变的内容没了,请问大神是怎么解决这个问题的

                      福建省福州市 电信

                    3. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      你的内容页面也加上头尾部分!

                      广东省深圳市 电信

                    4. 浅浅的 Lv.1 Chrome 54.0.2840.71 Chrome 54.0.2840.71 Windows Windows 回复

                      可否来个例子啊,简单的就好

                      四川省成都市 电信

                    5. 鬼少 Chrome 52.0.2743.116 Chrome 52.0.2743.116 Windows 7 Windows 7 回复

                      本站不是例子么。。。

                      广东省深圳市龙岗区 电信

                    6. 水手知明 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

                      头尾?那用pjax获取内容的时候页面不是重复了头尾部分,之前我找了很多博客,有一个思路是,判断请求头部是否有x-pjax,如果没有就转发到首页,然后首页加载完就判断url地址是否是是首页,如果不是,就触发pjax去获取地址,但运行后浏览器报jquery.js的问题,我把转发到首页代码去掉后,就不报错;请教大神这个网站是怎么处理这个问题的

                      福建省福州市 电信

                    7. 鬼少 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                      A页面有公共容器a B页面有公共容器a1 那么pjax之后会动态替换a-&amp;gt;a1 不会整页操作!虽然请求的是B页面但是用到的只是a1的内容!如果你的B页面只有a1的内容的话!刷新之后当然只会显示a1的内容咯。跟你那个x-pjax毛关系没有!那个是后台判断输出格式做优化用的!

                      广东省深圳市 电信

                  5. avatar

                    ForHeart Lv.1 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Mac OS X 10.12.1 Mac OS X 10.12.1 回复

                    jsp加载可以吗???

                    广东省广州市天河区 电信

                    1. 鬼少 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows Windows 回复

                      试试呗

                      广东省深圳市 电信

                  6. avatar

                    local Lv.1 Chrome 54.0.2840.71 Chrome 54.0.2840.71 Windows 7 Windows 7 回复

                    感谢,调用成功。 [心]

                    四川省遂宁市 电信

                    1. 鬼少 Chrome 52.0.2743.116 Chrome 52.0.2743.116 Windows 7 Windows 7 回复

                      聪明的人就是快。

                      广东省深圳市宝安区 电信

                    2. local Lv.1 Chrome 54.0.2840.71 Chrome 54.0.2840.71 Windows 7 Windows 7 回复

                      不过移动端貌似不支持喔。

                      四川省遂宁市 电信

                  7. avatar

                    LITTLE Lv.1 Chrome 54.0.2840.87 Chrome 54.0.2840.87 Windows Windows 回复

                    一句我任性,必须点赞 [嘻嘻] [嘻嘻]

                    广东省广州市海珠区 电信

                    00:00 / 00:00
                    顺序播放