先添加必要文件:

<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

转载于:https://www.cnblogs.com/telwanggs/p/7136729.html

PJAX全局无刷新的设置方法~相关推荐

  1. php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法

    PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...

  2. java pjax_通过pjax实现无刷新翻页(兼容新版jquery)

    摘要:这篇jQuery栏目下的"通过pjax实现无刷新翻页(兼容新版jquery)",介绍的技术点是"jQuery.无刷新翻页.pjax.无刷新.刷新.翻页", ...

  3. tp5 分页php不能foreach,tp5框架无刷新分页实现方法分析

    本文实例讲述了tp5框架无刷新分页实现方法.分享给大家供大家参考,具体如下: 已tp5 分页为例, 1.默认生成的分页 页码如下: « 1 2 » 2.点击页码  值,跳转到对应的页面,并get传 p ...

  4. 360浏览器自动刷新选项设置方法

    360浏览器自动刷新选项设置方法 360浏览器不安装插件自动刷新怎么设置?我们使用浏览器在游览器贴吧的时候,经常会不同的按"Ctrl+R"或者是"F5"来刷新页 ...

  5. 网络计算机无权限访问共享文件,win7共享文件夹无法访问怎么办?共享文件夹无权限访问设置方法...

    win7共享文件夹无权限访问设置方法: 第一步.同步工作组 不管使用的是什么版本的 Windows 操作系统,首先要保证联网的各计算机的工作组名称一致,要查看或更改计算机的工作组.计算机名等信息,请右 ...

  6. win7为什么无法共享计算机名称,win7共享文件夹无法访问怎么办?共享文件夹无权限访问设置方法...

    win7共享文件夹无权限访问设置方法: 第一步.同步工作组 不管使用的是什么版本的 Windows 操作系统,首先要保证联网的各计算机的工作组名称一致,要查看或更改计算机的工作组.计算机名等信息,请右 ...

  7. win10禁止dpi缩放在哪_如何在Win10中调整dpi缩放? Win10全局启用dpi缩放设置方法!...

    如何在Win10中调整dpi缩放?在Windows 10 Creators Update(版本1703)的操作中win10更改高dpi设置,我们可以将DPI扩大到200%. 关于如何在win10系统中 ...

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

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

  9. html5 pjax,pjax——页面无刷新跳转

    pjax虽然不是什么新的技术,然而本人是最近才发现这个比较牛叉的技术.下面是对pjax的介绍: pjax是在HTML5里面引用的新技术,是对ajax + pushState的封装,是实现无刷新ajax ...

最新文章

  1. dmol3给定关键字不在字典中_python中的数据结构与算法(2):字典与集合
  2. 【分块】#6281. 数列分块入门 5(区间开方,区间求和)
  3. System.Insert - 插入字符串
  4. buffer java作用_Java NIO之Buffer的使用
  5. java动态执行逻辑_动态执行代码逻辑
  6. 云炬60s看世界20211117
  7. mysql 金额 类型,SQL实现根据类型对金额进行归类
  8. Python对图像的基本操作
  9. alsa的动态库安装在哪里_Linux链接库一(动态库,静态库,库放在什么路径下)...
  10. nsq Android客户端,NSQ的golang客户端简单使用
  11. 【下载】DE2、DE2-70、DE1光盘资料
  12. VBA代码助手,代码库收藏管理工具,代码对齐,破解Excel工程密码,设置隐藏模块
  13. 英文学习20180410
  14. 修改迅雷下载链接的方法。
  15. 我的极限Scrum实践
  16. 能讲一下关于 18 世纪哲学家大卫 • 休谟和恐怖悖论吗
  17. 2019最新Android常用开源库总结(持续更新,建议收藏)
  18. 杜克研究生计算机专业,杜克研究生CS专业排名,谨记好好去看
  19. 贝壳上市背后的秘密武器-ACN
  20. The Meaning of Life

热门文章

  1. Flume Sink Processor
  2. html5做一个相册_HTML5最新版本介绍
  3. (133)FPGA面试题-Xilinx FPGA Block RAM的三种写模式是什么?
  4. (77)FPGA时钟激励(always)
  5. (44)Verilog HDL 计数器设计
  6. 【STM32】高级定时器、通用定时器和基本定时器---配置寄存器产生PWM
  7. 【C语言】常用字符(string库函数,ctype库函数),字符数组的输入与处理)
  8. 本地和ssh服务器传文件,SSH远程登录实现本地机和服务器的文件传输
  9. 进程调度 操作系统第二章知识点归纳总结
  10. MyBatis-Plus工具快速入门使用