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

时间:2024-01-21 18:59:20

前面文章介绍了前端路由简单实现和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