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

Posted 疯子加天才

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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无刷新跳转页面实现,支持超链接与表单提交的主要内容,如果未能解决你的问题,请参考以下文章

form 无刷新页面提交表单

使用iframe实现页面无刷新提交表单

node+pjax实现不刷新跳转

form表单提交方式

form表单提交方式

form提交不跳转