先添加必要文件:

<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%;opacity: .2}

1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。

2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。

3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax

PJAX全局无刷新的设置方法~的更多相关文章

  1. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  2. emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

    想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...

  3. 页面被iframe与无刷新更换url方法

    页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ if ...

  4. typecho开启pjax,ajax,无刷新

    1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...

  5. jQuery Pjax – 页面无刷新加载,优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  6. yii2.0下,JqPaginator与Pjax实现无刷新翻页

    控制器部分 <?php namespace backend\controllers; use common\models\Common; use Yii; use yii\base\Contro ...

  7. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  8. ASP.NET—015:ASP.NET中无刷新页面实现

    原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...

  9. 黄聪:Pjax 无刷新开发web,更好用户体验

    什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...

随机推荐

  1. Python与常见加密方式

    前言 我们所说的加密方式,都是对二进制编码的格式进行加密的,对应到Python中,则是我们的Bytes. 所以当我们在Python中进行加密操作的时候,要确保我们操作的是Bytes,否则就会报错. 将 ...

  2. 【codeforces 510D】Fox And Jumping

    [题目链接]:http://codeforces.com/contest/510/problem/D [题意] 你可以买n种卡片; 每种卡片的花费对应c[i]; 当你拥有了第i种卡片之后; 你可以在任 ...

  3. libcloud代码研究(三)——bugs

    Bug 1:对不可迭代类进行迭代(libcloud.storage.driver.cloudfile line. 141-142)      使用libcloud连接自搭建swift服务,自己在服务器 ...

  4. 欣喜若狂!今天最终成功把音频导入到iphone了,大半年的努力,靠的毅力和方法

    研究IOS 的助手也有大半年时间了,一直没有实现导入音视频文件的功能,主要是过程太复杂,而且基本上没有资料能够查询.经过不懈的努力,今天最终成功导入了一个mp3 文件到ipod,一切功能正常,期间经历 ...

  5. CentOS 安装 MRTG 软件完成后的 403 Forbidden(转载)

    用 yum 安装 MRTG 並设定好之后也把 apache 的 httpd.conf 加上 mrtg 的目录,但 http://server/mrtg 卻一直出現 403 Forbidden.在 ht ...

  6. webService总结(一)——使用CXF公布和调用webService(不使用Spring)

    CXF和Axis2是两个比較流行的webService框架,接下来我会写几篇博客简介怎样使用这两种框架. 首先,先简介一下CXF的使用. CXF公布webService有多种方法.这里我介绍三种: 1 ...

  7. BNUOJ ->Borrow Classroom(LCA)

    B. Borrow Classroom Time Limit: 5000ms Memory Limit: 262144KB 每年的BNU校赛都会有两次赛前培训,为此就需要去借教室,由于SK同学忙于出题 ...

  8. 520D

    模拟 很明显应该尽量选最大或最小的数.那么我们维护一个set,再维护一个mp,每次检查是否能选,如果选完这个数上面的东西不悬空就可以选,每次选完都要更新四周-2+2的方块,因为再远就影响不到了 #in ...

  9. 利用递归分割(Split)字符串

    利用递归分割(Split)字符串 SqlServer 递归 工作需要将表里的某个字段分割之后再插入到另一个表中,其实数据量不大,直接用游标一行一行的取,再利用循环来分割之后再实现数据的插入应该可以直接 ...

  10. php write excel

    /** * 写excel方法 */ function writeExcel($tabArr, $dataArr,$path) { require_once CODE_BASE2 . '/util/ph ...