关于 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>

然后下面加上:

<script type="text/javascript" language="javascript">
$(function() {
//这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).pjax('a', '#content', {fragment:'#content', timeout:6000}); 
//这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); 
    $(document).on('pjax:send', function() {
          //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
          //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
          });
});
</script>

参考资料:
一句代码为typecho博客加上pjax技术
Pjax局部无刷新技术教程
PJAX 实现无刷新加载网页

本文链接:

https://www.wrdan.com/tech/pjax.html
1 + 4 =
快来做第一个评论的人吧~