jquery pjax 用法总结

以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面,中间可以很明显的看到短暂的白屏。pjax就很好的解决了这问题。

pjax的原理很简单,就是发送一个ajax请求,获取html代码,再把相关代码应用到指定容器中,就完成了pjax。pjax除了解决跳转白屏以外,还能替代iframe,让前端不得不使用iframe的场景大大减少。

一个最简单的pjax例子,只需要jQuery,不使用任何插件:

html:

<a class="leftPaneItem"  onclick="writeMail()">写邮件</a>

<div id="control"></div>

js:

function sentMail() {
$.ajax({
url:"./writeMail.html",
success:function (data) {
$("#control").html(data)
}
})
}
这里对writeMail.html有些特殊要求,需要在普通html页面的基础上去掉html、meta、body、title等标签,仅保留body内的部分。
如果有引用样式或者脚本可以照常引用,只是路径是相对于发送请求的页面,而不是被请求的页面。 有封装好的插件吗?答案是有的。
插件地址:https://github.com/defunkt/jquery-pjax 使用pjax插件的话,上面的js就可以改成:
function sentMail() {
   $.pjax({
  url:"./writeMail/writeMail.html", //请求的页面地址
  container:"#control",          //使用什么容器装载html
       push:false,               //是否模拟a链接跳转造成的url改变    })
}
如果想快速将页面内所有a标签替换成pjax的跳转方式可以写成这样:
$(document).pjax('a', '#container')
其中a是触发元素,#container是装载pjax返回内容的容器。

如果被请求的页面已经包含html、body之类的标签,请求来之后又不想要这些标签,可以这样写:
function sentMail() {
   $.pjax({
  url:"./writeMail/writeMail.html", //请求的页面地址
  container:"#control",          //使用什么容器装载html
       push:false,               //是否模拟a链接跳转造成的url改变
       fragment:"body"            //css选择器,被选中dom的内容会被抽取出来
   })
}

有一点需要注意:如果使用pjax插件并且在配置里不设置push选项为false,则要求项目内所有经过pjax处理的链接必须采用绝对路径,否则跳转后再次跳转到相对路径则会导致404。

上一篇:用Eclipse+xdebug调试PHP总是在首行自动断点解决方法


下一篇:Javascript 函数声明、函数表达式与匿名函数自执行表达式