使用 Pjax 无刷新 AJAX 异步加载网页 - 文章教程

使用 Pjax 无刷新 AJAX 异步加载网页

发布于 2018-07-16 字数 3278 浏览 2058 评论 0

Pjax 是一个比较好的插件,通过简单的配置,可以实现无刷新加载我们的网页,搭配一些 Loading 加载动画,即可完美的提升我们网站的用户体验。

整合 pjax 的准备工作

检查你的网站是否引入 1.7.0 版本以上的 jquery.js,如果没有请全局引入

1.新浪CDN提速
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
2.下载本地化jq(本文底部)
<script type="text/javascript" src="....自己写...../jquery.js"></script>

1.7.0 版本以上的才有 pushState 的封装。

开始整合 Pjax

下载 pjax.js

在你喜欢的位置(最好body代码结束前)引入pjax.js

使用 pjax

编辑模版footer.php在</body>标记结束前插入:

$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});

这句话是什么意思呢?

绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换 contentleft 的容器的内容为新内容 contentleft,ajax 超时时间 8 秒;

因为每个模版的替换区不同,修改掉 contentleft 容器保存。

现在看看,是否可以无刷新加载了?

解决 pjax 的缓冲并加入等待动画

pjax.js提供了两个接口;

<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
});
</script>

当然要为 pjax_loading 定义 CSS,这里就不多说了。

解决 pjax 之后 jQuery 事件失效的问题

原先绑定的事件被新元素替换掉了,新元素没有绑定事件,所以点击无效,利用pjax的加载完成回调函数,重新绑定事件即可。

$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo(); //pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
	var dus=$(".ds-thread");
	if($(dus).length==1){
		var el = document.createElement('div');
		el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
		el.setAttribute('data-url',$(dus).attr("data-url"));
		DUOSHUO.EmbedThread(el);
		$(dus).html(el);
	}
}

我们发现多说可以正常载入了。

全部代码汇总就是这样

<script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script src="pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
    pajx_loadDuodsuo();
});
function pajx_loadDuodsuo(){
	var dus=$(".ds-thread");
	if($(dus).length==1){
		var el = document.createElement('div');
		el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
		el.setAttribute('data-url',$(dus).attr("data-url"));
		DUOSHUO.EmbedThread(el);
		$(dus).html(el);
	}
}
</script>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0