整合pjax无刷新

一：整合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 ；

2.在你喜欢的位置（最好body代码结束前）引入pjax.js；

三：使用pjax；

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

<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>
这句话是什么意思呢？--绑定本页面非新窗口打开的全部本域连接，连接点击以后，替换contentleft的容器的内容为新内容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[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>