如何将Pjax整合进网站,实现全站无刷新加载?

冷眼观世界 1026 3

pjax工作原理

用大白话来说,就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页,一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题,通过利用html5 pushState的api,我们可以轻松达到发送ajax请求的同时,动态的记录状态,这就是pjax!


准备工作

pjax是嘛玩意我们懂了之后,就要开始用它了!但是我们要写一套复杂的js去pushState么?答案是不需要的,已经有人封装好了JqueryPjax插件,我们只需用人家写好的插件即可。由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦!

  1. <script type='text/javascript' src='jquery-2.1.4.min.js'></script>  
  2. <script type='text/javascript' src='pjax.js'></script>  


开始使用

模板中:

  1. $(document).pjax('a', '#pjax-container');  
  2. $(document).on("pjax:timeout"function(event) {  
  3.     // 阻止超时导致链接跳转事件发生  
  4.     event.preventDefault();  
  5. });  

本页面所有a链接默认用pjax请求数据,请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承,直接写入父类即可。


后台程序、这里用php程序示范:

首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):

  1. protected function is_pjax(){  
  2.   $input = $_POST;  
  3.   if(isset($input['_pjax']) && !emptyempty($input['_pjax'])){  
  4.       return true;//是pjax请求  
  5.   }else{  
  6.       return false;//不是pjax请求  
  7.   }  
  8. }  

然后控制器根据是否pjax返回不同的数据:

  1. if($this->is_pjax()){  
  2.     return view('index_pjax');//返回pjax的模板  
  3. }  
  4. return view('index');//返回正常的模板  

这里用laravel的方法展示了下,TP中是$this->display()这里不再赘述。


好了,此时大功告成!

解决问题

问题:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以JQ等绑定的事件无效。如多说评论框无法正常使用。

解决:用pjax的加载完成后的回调函数再次绑定即可!

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


进一步优化

过渡动画效果:

pjax.js提供了两个api:

  1. <div class="loading"></div>//用css+js写你的过渡动画效果  
  2. <script>  
  3. $(document).on('pjax:send', function() {   
  4.     $(".loading").css("display""block");//pjax链接点击后显示加载动画;  
  5. });  
  6. $(document).on('pjax:complete', function() {   
  7.     $(".loading").css("display""none");//pjax链接加载完成后隐藏加载动画;  
  8. });  
  9. </script>  


pjax与百度编辑器代码高亮

使用pjax后,百度编辑器的代码高亮是没效果的,在回调中使用SyntaxHighlighter.all()是没任何效果的,我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可!


转自涛先森博客

网站优化pjax

打赏
发表评论
表情 图片 链接 代码

  1. 天津网站建设
    感谢博主的分享
  2. 武胜
    武胜 Lv 1
    写得不错支持一下
  3. 广安养老院
    文章很好值得一看
分享
微信
微博
QQ