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

helloweba.com 作者:月光光 时间:2016-09-26 10:52 标签: pjax  SPA  html5 

前面我有文章介绍了前端路由和Pjax单页面应用方面的实例应用,今天我来和大家分享一个单页面应用神器jquery.pjax.js。它是基于jQuery的pjax插件,使用方便,功能完善。我会结合实例给大家讲解使用jquery.pjax.js。

在上一期文章中,我们了解了Pjax的实现原理,它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能,它在我们原有的ajax功能上,实现了可以记录浏览历史,可以使用浏览器前进后退功能,浏览器的url可以跟随内容变化,而整个页面可以只刷新某一部分,也就是局部刷新。

今天我要给大家分享的这个实例是模拟分页功能,分页是在web开发中最常见的组件之一。正常情况下,点击分页组件中的页面,页面会跳转到对应的页面,而使用Pjax后,点击页码时,会发送一个ajax请求到后端,响应后更新对应的页面内容部分,同时地址栏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

我们使用的pjax组件依赖jQuery库,所以先将这两个文件加载。

<script src="jquery-2.0.0.min.js"></script>
<script src="jquery.pjax.js"></script>

然后,使用以下代码调用pjax插件。

$(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');

现在在pjax兼容浏览器,点击分页条上的页码,网页的内容容器 #container 中的内容将被 data.php?p=x 的内容替换。

data.php的内容我们简单的写个代码,实际开发中应该是读取数据库中的数据列表。

$p = intval($_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

顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章