1. 首页
  2. 功能技巧
  3. 关于PJAX局部刷新,支持评论和搜索。

关于PJAX局部刷新,支持评论和搜索。

首先需要引入JQ库与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.5/jquery.pjax.min.js"></script>
然后添加

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

2.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。
3.这个教程是官方的使用方法,我只是照搬,顺便加上了我个人所理解的注释。
4.我发现网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。
5.发这个所畏的教程并不是为了诋毁谁,只是为了方便大家。


PS:该文转载自EMLOG论坛

评论(1)