博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
PJAX全局无刷新的设置方法~
阅读量:6259 次
发布时间:2019-06-22

本文共 1616 字,大约阅读时间需要 5 分钟。

先添加必要文件:

<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

转载地址:http://hxqsa.baihongyu.com/

你可能感兴趣的文章
iOS开发实战 - 完美解决UIScrollView嵌套滑动手势冲突
查看>>
IO流学习总结(下)---序列化 反序列化
查看>>
万物互联 | 无感停车解决方案探析
查看>>
用VR学习灾难逃生技巧,地震来了不再慌
查看>>
朱啸虎:区块链是伪风口的可能性大,任何创新都要经历死亡谷
查看>>
SQLAlchemy 1.3.1 发布,Python ORM 框架
查看>>
美国科学家训练AI,用路上车辆判断人们的政治立场
查看>>
全球约39亿人未接入互联网 中国互联网用户数达7.21亿
查看>>
美国移动运营商AT&T服务故障,导致大范围用户无法寻求紧急救助服
查看>>
Spring中基于AOP的@AspectJ
查看>>
AI+时尚的盛宴,FashionAI全球挑战赛进入复赛阶段
查看>>
mybatis系统学习(二)——使用基础mybatis代替原始jdbc
查看>>
Linux 网络编程之原始套接字
查看>>
【树莓派】Linux应用相关:自动删除n天前日志
查看>>
Azkaban Install and Schedule Job
查看>>
不仅是NRA球赛,手术也在VR直播了!
查看>>
android 空调遥控器——简单发送内容
查看>>
数字比较
查看>>
MS CRM 2011 Form与Web Resource在JScript中的相互调用
查看>>
Oracle下定时删除归档日志脚本
查看>>