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

最新推荐文章于 2024-08-22 08:54:08 发布

怀璧其罪

最新推荐文章于 2024-08-22 08:54:08 发布

阅读量4.2k

点赞数

分类专栏： html+css

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文来自：http://www.az1314.cn/art/17

pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称，综合这两个技术可以实现在不刷新页面的情况下载入HTML网页，带给你超快速的浏览器体验，而且有固定链接、标题以及后退按钮都是有效的。

pjax工作原理

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

准备工作

pjax是嘛玩意我们懂了之后，就要开始用它了！但是我们要写一套复杂的js去pushState么？答案是不需要的，已经有人封装好了JqueryPjax插件，我们只需用人家写好的插件即可。

由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦！

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

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

开始使用

模板中:

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

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

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

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

 
      protected  
      function  
      is_pjax(){ 
     
      $input  
      =  
      $_POST 
      ; 
     
      if 
      (isset( 
      $input 
      [ 
      '_pjax' 
      ]) && ! 
      empty 
      ( 
      $input 
      [ 
      '_pjax' 
      ])){ 
     
      return  
      true; 
      //是pjax请求 
     
      } 
      else 
      { 
     
      return  
      false; 
      //不是pjax请求 
     
      } 
     
      }

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

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

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

好了，此时大功告成！

解决问题

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

解决:用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>

进一步优化

过渡动画效果:

pjax.js提供了两个api：

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