Pjax無刷新跳轉頁面實現，支持超鏈接與表單提交

什么是pjax？

當你點擊一個站內的鏈接的時候，不是做頁面跳轉，而是只是站內頁面刷新。這樣的用戶體驗，比起整個頁面都閃一下來說， 好很多。 其中有一個很重要的組成部分， 這些網站的ajax刷新是支持瀏覽器歷史的， 刷新頁面的同時， 瀏覽器地址欄位上面的地址也是會更改， 用瀏覽器的回退功能也能夠回退到上一個頁面。 那么如果我們想要實現這樣的功能， 我們如何做呢？ 我發現pjax提供了一個腳本支持這樣的功能。 pjax項目地址在 https://github.com/defunkt/jquery-pjax 。 實際的效果見： http://pjax.heroku.com/ 沒有勾選pjax的時候， 點擊鏈接是跳轉的。 勾選了之后， 鏈接都是變成了ajax刷新。

pjax可以實現局部刷新，和ajax的區別是，pjax的局部刷新，瀏覽器地址欄的網址會變化。
這個jquery.pjax.min.js是國外大神寫的jquery開源的pjax通用封裝插件，此外網上很多以上封裝的教程都沒有加上form事件，這個代碼還可以解決博客的搜索和評論問題。

怎樣使用pjax

先添加必要文件：

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

然后在js代碼中寫如下代碼：

$(function(){
    //頁面主體內容支持pjax
   $(document).pjax('a', '#container', {
          //這是a標簽的pjax。#container 表示執行pjax后會發生變化的id，改成你主題的內容主體id或class。timeout是pjax響應時間限制，如果在設定時間內未響應就執行頁面轉跳，可自由設置。
            fragment:'#container', timeout:1500
   });
    //支持表單提交事件無刷新
   $(document).on('submit', 'form', function (event) {
          //這是提交表單的pjax。form表示所有的提交表單都會執行pjax，比如搜索和提交評論，可自行修改改成你想要執行pjax的form id或class。#container 同上改成你主題的內容主體id或class。
        $.pjax.submit(event, '#container', {
            fragment:'#container', timeout:6000
        });
    });
    //執行pjax開始，在這里添加要重載的代碼，可自行添加loading動畫代碼。例如你已調用了NProgress，在這里添加 
    $(document).on('pjax:send', function() {
        $('body').append('<div class="loading"></div>');
        $('.main').fadeTo(200,0.0);
    }); 
    //執行pjax結束，在這里添加要重載的代碼，可自行添加loading動畫結束或隱藏代碼。例如NProgress的結束代碼 
    $(document).on('pjax:complete', function() {
        $('.loading').remove();
        $('.main').fadeTo(500,1); 
    });
});

由於網上很多教程里面都沒有表單提交，評論搜索不支持pjax，因此本人在網上收集了資料整理一篇比較完整的文章供大家參考。
部分文字來源：
http://www.codesec.net/view/195662.html
http://bbs.emlog.net/forum.php?mod=viewthread&tid=40681 在此感謝！！