使用jquery.pjax实现SPA单页面应用

  jquery.pjax.js。它是基于jQuery的pjax插件,使用方便,功能完善。本实例是模拟分页功能,分页是在web开发中最常见的组件之一。正常情况下,点击分页组件中的页面,页面会跳转到对应的页面,而使用Pjax后,点击页码时,会发送一个ajax请求到后端,响应后更新对应的页面内容部分,同时地址栏url也对应实际的页码url,但整个页面并没有跳转,这样的好处是实现了可以记录浏览历史,可以使用浏览器前进后退功能,浏览器的url可以跟随内容变化,而整个页面可以只刷新某一部分,也就是局部刷新。

HTML

  准备一个加载div#loading,默认隐藏,ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。

<div class="row">  
    <div id="loading">Loading...</div> 
    <div id="container">jQuery.pjax分页</div> 
    <nav> 
      <ul class="pagination"> 
        <li><a href="data.php?p=1">1</a></li> 
        <li><a href="data.php?p=2">2</a></li> 
        <li><a href="data.php?p=3">3</a></li> 
        <li><a href="data.php?p=4">4</a></li> 
        <li><a href="data.php?p=5">5</a></li> 
      </ul> 
    </nav> 
</div>  

Javascript

<script src="jquery-2.0.0.min.js"></script>  
<script src="jquery.pjax.js"></script>  
$(document).pjax('.pagination a', '#container'); 
$(document).on('pjax:send', function() { 
  $('#loading').show(); 
}) 
$(document).on('pjax:complete', function() { 
  $('#loading').hide(); 
})

  上面的代码中,告诉pjax监听一个标签和使用#container作为目标容器:

$(document).pjax('.pagination a', '#container');

  点击分页条上的页码,网页的内容容器#container中的内容将被data.php?p=?的内容替换。

  模拟数据:

$p = (int)$_GET['p']; 
if($p==0) $p=1;  
echo '这是第'.$p.'页';  

选项与事件

  pjax的调用方法可以设置一些选项用来定制。格式如下:

$(document).pjax(selector, [container], options)
  • selector 是一个字符串,比如要点击的文本event delegation。
  • container 是一个字符串,选择唯一标识pjax容器。
  • options 下面所描述的一个对象。
参数描述默认值
timeoutAjax超时毫秒之后完全强制刷新650
push使用 pushState 在导航中添加浏览器历史记录true
replace更换网址不添加浏览器历史记录false
maxCacheLength大缓存大小为以前的容器内容20
version一个字符串或函数返回当前pjax版 
scrollTo垂直位置以滚动导航。为了避免改变滚动位置,通过设置为 false.0
type网页请求的方式"GET"
dataType返回的数据类型"html"
containerCSS选择器的元素,其中的内容应及时更换 
url字符串或函数返回的URL ajax请求link.href
target最终 relatedTarget 的值,通过 pjax eventslink
fragmentCSS选择器的碎片从Ajax响应提取 

事件方法

事件描述
pjax:click阻止一个链接的默认事件,防止阻止pjax事件
pjax:beforeSend参见 XHR headers
pjax:start请求开始
pjax:send发送请求
pjax:clickedpjax后,已经得到了从点击一个链接开始
pjax:beforeReplace在内容被替换前,HTML从服务器加载的内容
pjax:success在内容被替换后,HTML 内容从服务器加载
pjax:timeout在选项 options.timeout;之后除非取消,否则将很难刷新
pjax:error一个ajax错误,将执行原始的网页刷新,直到网页加载被取消
pjax:complete总是在pjax执行完成以后调用,不论运行的结果
pjax:end请求结束
pjax:popstate浏览器前进后退事件 direction 属性:”back”/”forward”

  $.pjax还能响应点击事件,以及提交表单和重新加载事件。

  jquery.pjax项目地址:https://github.com/defunkt/jquery-pjax