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

前面文章介绍了前端路由简单实现和Pjax入门方面的文章，今天来分享一个单页面应用神器jquery.pjax.js。

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 下面所描述的一个对象。

 

参数	描述	默认值
timeout	Ajax超时毫秒以后彻底强制刷新	650
push	使用 pushState 在导航中添加浏览器历史记录	true
replace	更换网址不添加浏览器历史记录	false
maxCacheLength	大缓存大小为之前的容器内容	20
version	一个字符串或函数返回当前pjax版
scrollTo	垂直位置以滚动导航。为了不改变滚动位置，经过设置为 false.	0
type	网页请求的方式	“GET”
dataType	返回的数据类型	“html”
container	CSS选择器的元素，其中的内容应及时更换
url	字符串或函数返回的URL ajax请求	link.href
target	最终 relatedTarget 的值，经过 pjax events	link
fragment	CSS选择器的碎片从Ajax响应提取

事件方法

事件	描述
pjax:click	阻止一个连接的默认事件，防止阻止pjax事件
pjax:beforeSend	参见 XHR headers
pjax:start	请求开始
pjax:send	发送请求
pjax:clicked	pjax后，已经获得了从点击一个连接开始
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

/********/

查看更多内容 https://www.zhouyangla.com/?p=174