使用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" rel="external nofollow" >1</a></li>
        <li><a href="data.php?p=2" rel="external nofollow" >2</a></li>
        <li><a href="data.php?p=3" rel="external nofollow" >3</a></li>
        <li><a href="data.php?p=4" rel="external nofollow" >4</a></li>
        <li><a href="data.php?p=5" rel="external nofollow" >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 下面所描述的一个对象。

事件方法

$.pjax还能响应点击事件，以及提交表单和重新加载事件。详情请参考jquery.pjax项目地址：https://github.com/defunkt/jquery-pjax

/********/

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