如何使用jquery.pjax实现SPA单页面应用-创新互联

本篇内容主要讲解“如何使用jquery.pjax实现SPA单页面应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用jquery.pjax实现SPA单页面应用”吧!

10年积累的成都网站设计、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站设计后付款的网站建设流程,更有遵化免费网站建设让你可以放心的选择与我们合作。

今天我要给大家分享的这个实例是模拟分页功能,分页是在web开发中最常见的组件之一。正常情况下,点击分页组件中的页面,页面会跳转到对应的页面,而使用Pjax后,点击页码时,会发送一个ajax请求到后端,响应后更新对应的页面内容部分,同时地址栏url也对应实际的页码url,但整个页面并没有跳转,给我们的感觉是非常流畅,当然,我们也可以在请求页面异步时增加加载动画效果。来看具体的使用方法。

HTML

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

   

Loading...

   

jQuery.pjax分页

   

Javascript

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

然后,使用以下代码调用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超时毫秒之后完全强制刷新650push使用 pushState 在导航中添加浏览器历史记录truereplace更换网址不添加浏览器历史记录falsemaxCacheLength大缓存大小为以前的容器内容20version一个字符串或函数返回当前pjax版 scrollTo垂直位置以滚动导航。为了避免改变滚动位置,通过设置为 false.0type网页请求的方式"GET"dataType返回的数据类型"html"containerCSS选择器的元素,其中的内容应及时更换 url字符串或函数返回的URL ajax请求link.hreftarget最终 relatedTarget 的值,通过 pjax eventslinkfragmentCSS选择器的碎片从Ajax响应提取

事件方法

事件描述pjax:click阻止一个链接的默认事件,防止阻止pjax事件pjax:beforeSend参见 XHR headerspjax: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

到此,相信大家对“如何使用jquery.pjax实现SPA单页面应用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


新闻名称:如何使用jquery.pjax实现SPA单页面应用-创新互联
本文来源:http://pwwzsj.com/article/dgscph.html