[教程]整合PJAX网页无刷新,支持评论和搜索...

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
一:整合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;

     1.下载pjax.js (本文底部);

     开源地址:https://github.com/defunkt/jquery-pjax

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

三:使用pjax;

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

<script>
    $(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:8000});
</script>

    这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换content的容器的内容为新内容contentleft,ajax超时时间8秒;

    OK,因为每个模版的替换区不同,修改掉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之后,容器中一些jq事件失效的问题;

    问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

    问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

    解决方法:利用pjax的加载完成回调函数,重新绑定事件。

    例:

<script>
$(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>

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

六:全部代码汇总一下,就是这样:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="你的域名/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a', '#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链接点击后显示加载动画;
    $(".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>

其他一些文件下载地址: 密码:wufh

版权声明:若无特殊注明,本文皆为《 明月浩空 》原创,转载请保留文章出处。
本文链接:[教程]整合PJAX网页无刷新,支持评论和搜索... https://limh.me/pjax_jiaocheng.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框
可使用QQ号实时获取昵称+头像

吃奶的力气提交吐槽中...

已有27条吐槽

.· 红尘过客

2个月前(10-18) 江苏省南京市联通
看了你的pjax鬼少博客也写了跟你差不多的教程 face
 Apple iPhone   Safari 10.0

ㄗs神經西西

4个月前(08-20) 江苏省常州市360网站卫士电信CDN节点
看看是不是十分
 Windows 10 x64   UC Browser 6.1.3397.16

在路上

9个月前(03-26) 内蒙古鄂尔多斯市联通
不错,看看
 Windows 7 x64   Google Chrome 56.0.2924.87

匿名

9个月前(03-11) 浙江省金华市电信
face 好羞射,文章真的好赞啊,顶博主!
face 有点看不懂哦,希望下次写的简单易懂一点!
 Windows 7   Google Chrome 45.0.2454.101

benzBrake

10个月前(02-15) 北京市电信通
怎么过滤某些不想要的url,例如url中带/action/的就不能ajax了
 Windows 10 x64   Firefox 50.0

匿名

1年前(2016-10-31) 河南省郑州市联通
文章评论ajax怎么做啊
 Windows 8.1 x64   Google Chrome 54.0.2840.59

一念

1年前(2016-09-07) 新疆乌鲁木齐市电信
主题的内容主体id是什么意思?
 Windows 10   Edge 13.10586

姓覃的老男孩

2年前(2016-01-07) 广东省惠州市电信
face 好羞射,文章真的好赞啊,顶博主!
 Windows XP   Google Chrome 47.0.2526.80

心跳起于

2年前(2015-12-01) 四川省成都市联通
face .......为什么我的PJAX 会发一个xhr请求 然后马上取消掉发document请求啊
 Windows 7 x64   Google Chrome 43.0.2357.132

清馨雅致

2年前(2015-10-31) 湖南省郴州市汝城县指尖岁月网络会所(华隆步行街北栋2楼)
恩恩,这个不久前把它整合到主题中了~
 Windows XP   UC Browser 5.5.6125.14

Watish

2年前(2015-10-17) 江苏省泰州市电信
face 好羞射,文章真的好赞啊,顶博主!
 Windows XP   Baidu Browser 8.0

大大

2年前(2015-09-15) 河南省郑州市联通
好牛逼的说
 Windows 8.1   Google Chrome 31.0.1650.63

shellingford

3年前(2015-06-20) 浙江省杭州市电信
换成http了
 Windows 8.1 x64   Sogou Explorer

明月浩空

3年前(2015-06-21) 天津市电信IDC机房
@shellingford:嗯,因为接口要用网易和虾米,会出现黄色警告。
 Windows 7 x64   Google Chrome 25.0.1364.84

瓜情寡意

3年前(2015-06-19) 广东省揭阳市电信
大神就是不一样
 Windows XP   Google Chrome 42.0.2311.152

明月浩空

3年前(2015-06-19) 天津市电信IDC机房
@瓜情寡意:face 大神,求别闹。
 Windows 7 x64   Google Chrome 25.0.1364.84

匿名

3年前(2015-06-22) 北京市北京数据家科技有限公司电信数据中心
@明月浩空:face 哈哈
 Windows 7   Google Chrome 14.0.835.186

wys.me

3年前(2015-06-19) 宁夏银川市电信
对我言太专业了。感觉不错的技术应用,支持一个。
 Windows XP   Google Chrome 33.0.1750.117

匿名

3年前(2015-06-22) 北京市北京数据家科技有限公司电信数据中心
@wys.me:挺好
 Windows 7   Google Chrome 14.0.835.186

lonewolf

3年前(2015-06-19) 江苏省苏州市电信
face 好羞涩,
 Apple iPad   MIUI Browser 1.0

Finally

3年前(2015-06-19) 湖南省长沙市电信
我也过来吐槽了 face
 Windows 7 x64   Google Chrome 38.0.2125.122

mrxn

3年前(2015-06-19) 黑龙江省鸡西市联通
我就是过来吐槽的 哈哈
 Windows 7 x64   Google Chrome 31.0.1650.63

明月浩空

3年前(2015-06-19) 天津市电信IDC机房
@mrxn:face 我在维护服务器,所以一段时间网站会很卡,哈哈,数据太多了。
 Windows 7 x64   Google Chrome 25.0.1364.84

947634891

3年前(2015-06-20) 山西省长治市网宿科技联通CDN节点
@明月浩空:难怪,昨天卡得要命,今天稍微好些了
 Windows 7   Google Chrome 43.0.2357.81

明月浩空

3年前(2015-06-20) 天津市电信IDC机房
@947634891:嗯,我在重写播放器内核。
 Windows 7 x64   Google Chrome 25.0.1364.84

爱思助手

3年前(2015-06-22) 北京市北京数据家科技有限公司电信数据中心
@mrxn:我也是来吐槽的
 Windows 7   Google Chrome 14.0.835.186

Mrxn

2年前(2015-10-15) 黑龙江省鸡西市联通
@爱思助手:额  好久没来 没时间 过来看看
 Windows 7 x64   QQBrowser 9.1.4060.400