关于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[target!=_blank]', '#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,.pjax_loading1").css("display", "block");//参考的loading动画代码
          //执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码
          //执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
          });
});
</script>
<div class="pjax_loading"></div>
<div class="pjax_loading1"></div>

参考css代码(可自己去百度搜索,本站也有)

.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2}

参考gif动画

pjax_loading.gif
1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。
2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。
3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax
4.如果有需要加播放器的朋友,请进入这个页面https://pjax.cn/grfx/em_player.html

本文标签:

版权声明:若无特殊注明,本文皆为《Finally》原创,转载请保留文章出处。

本文链接:关于PJAX局部刷新 - https://pjax.cn/pjax_form.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

9条评论
  1. avatar

    小木鱼 Lv.1 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows Windows 回复

    视频看不了了

    广西南宁市 联通

    1. avatar

      wrz博客 Lv.2 Android Webkit 4.0 Android Webkit 4.0 Android 4.3 Android 4.3 回复

      看看,学习了

      湖北省武汉市 电信

      1. avatar

        匿名 Lv.1 Chrome 43.0.2357.132 Chrome 43.0.2357.132 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        不错 表情

        广东省广州市 电信

        1. avatar

          小小的太阳 Lv.1 Internet Explorer  Internet Explorer  iPhone iOS 7.1.2 iPhone iOS 7.1.2 回复

          大大。虽然成功了。但问题出现了,点击文章后动画一直出现页面没变动查看源代码却变已经变了。

          浙江省温州市 移动

          1. avatar

            康圳 Lv.1 Sogou Explorer Sogou Explorer Windows 7 x64 Edition Windows 7 x64 Edition 回复

            支持一下 表情

            湖南省长沙市 电信