如何将Pjax整合进网站,实现全站无刷新加载?

AlanblogAlan 41人围观

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哦!

1
2
'text/javascript' src='jquery-2.1.4.min.js'>
'text/javascript' src='pjax.js'>

开始使用

模板中:

1
2
3
4
5
$(document).pjax('a''#pjax-container');
$(document).on("pjax:timeout"function(event) {
    // 阻止超时导致链接跳转事件发生
    event.preventDefault();
});

本页面所有a链接默认用pjax请求数据,请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承,直接写入父类即可。

后台程序、这里用php程序示范:

首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):

1
2
3
4
5
6
7
8
protected function is_pjax(){
  $input $_POST;
  if(isset($input['_pjax']) && !empty(

转载请注明来自Alan博客,本文标题:如何将Pjax整合进网站,实现全站无刷新加载?

发布评论
生活是一场戏,主角当累了,你亦可成为观众,停下脚步,歇一歇
Top