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

巴特西

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

什么是pjax？

怎样使用pjax

最新文章

热门文章