本文来自：http://www.az1314.cn/art/17
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称，综合这两个技术可以实现在不刷新页面的情况下载入HTML网页，带给你超快速的浏览器体验，而且有固定链接、标题以及后退按钮都是有效的。
pjax工作原理
用大白话来说，就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页，一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题，通过利用html5 pushState的api，我们可以轻松达到发送ajax请求的同时，动态的记录状态，这就是pjax!
准备工作
pjax是嘛玩意我们懂了之后，就要开始用它了！但是我们要写一套复杂的js去pushState么？答案是不需要的，已经有人封装好了JqueryPjax插件，我们只需用人家写好的插件即可。
由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦！
<script type=
'text/javascript'
src=
'jquery-2.1.4.min.js'
></script>
<script type=
'text/javascript'
src=
'pjax.js'
></script>
|
开始使用
模板中:
$(document).pjax(
'a'
,
'#pjax-container'
);
$(document).on(
"pjax:timeout"
,
function
(event) {
// 阻止超时导致链接跳转事件发生
event.preventDefault();
});
|
本页面所有a链接默认用pjax请求数据，请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承，直接写入父类即可。
后台程序、这里用php程序示范:
首先判断是pjax请求还是正常的请求，可以封装成一个方法(方法很多~我只做个示范):
protected
function
is_pjax(){
$input
=
$_POST
;
if
(isset(
$input
[
'_pjax'
]) && !
empty
(
$input
[
'_pjax'
])){
return
true;
//是pjax请求
}
else
{
return
false;
//不是pjax请求
}
}
|
然后控制器根据是否pjax返回不同的数据:
if
(
$this
->is_pjax()){
return
view(
'index_pjax'
);
//返回pjax的模板
}
return
view(
'index'
);
//返回正常的模板
|
这里用laravel的方法展示了下，TP中是$this->display()这里不再赘述。
好了，此时大功告成！
解决问题
问题:原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以JQ等绑定的事件无效。如多说评论框无法正常使用。
解决:用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>
|
进一步优化
过渡动画效果:
pjax.js提供了两个api：
<div class=
"loading"
></div>
//用css+js写你的过渡动画效果
<script>
$(document).on(
'pjax:send'
,
function
() {
$(
".loading"
).css(
"display"
,
"block"
);
//pjax链接点击后显示加载动画；
});
$(document).on(
'pjax:complete'
,
function
() {
$(
".loading"
).css(
"display"
,
"none"
);
//pjax链接加载完成后隐藏加载动画；
});
</script>
|
pjax与百度编辑器代码高亮
使用pjax后，百度编辑器的代码高亮是没效果的，在回调中使用SyntaxHighlighter.all()是没任何效果的，我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可！
好了，关于pjax的教程就告一段落了~有不懂的可以私下问我~
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
