黄聪: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 在此感谢!!

上一篇:为什么一点onclick按钮就提交表单?


下一篇:JQuery 选择器