Pjax无刷新跳转页面实现，支持超链接与表单提交

Posted 2020-09-27 疯子加天才

什么是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 在此感谢！！