pjax demo 使用教程基於tp5 pjax demo

<style>

 .spinner { width: 150px; text-align: center;
        /*display: none;*/
    } .spinner > div { width: 30px; height: 30px; background-color: #67CF22; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both;
    } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;
    } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;
    } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0);
        } 40% { transform: scale(1.0); -webkit-transform: scale(1.0);
          } } </style>

    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
<script type="text/javascript"> $(document).on('pjax:send', function() { //pjax鏈接點擊后顯示加載動畫；
 $(".spinner").css("display", "block"); }); $(document).on('pjax:complete', function() { //pjax鏈接加載完成后隱藏加載動畫；
 $(".spinner").css("display", "none"); }); $(document).pjax('.pjax,.pagination a,.pjax2', '#container', {fragment:'#container', timeout:8000}); </script>

請注意如果使用的是tp5 框架，它默認返回的html結構是json 需要在配置項里面修改為html:

// 默認AJAX 數據返回格式,可選json xml ...  [ todo 這里默認是 json 由於后台采用 pjax 需要接收的是html]

'default_ajax_return'    => 'html',

　pjax 引用官方地址

<script src="https://pjax.herokuapp.com/jquery.pjax.js"></script>