使用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
使用jquery.pjax实现SPA单页面应用的更多相关文章
- Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
- AngularJs(SPA)单页面SEO以及百度统计应用(上)
只有两种人最具有吸引力,一种是无所不知的人,一种是一无所知的人 问:学生问追一个女孩总是追不上怎么办?回答:女孩不是追来的,是吸引来的,你追的过程是吸引女孩的过程,如果女孩没有看上你,再追都是没有用的 ...
- 通过Blazor使用C#开发SPA单页面应用程序(3)
今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...
- 快速了解SPA单页面应用
简要 SPA单页网页应用程序这个概念并不算新,早在2003年就已经有在讨论这个概念了,不过,单页应用这个词是到了2005年才有人提出使用,SPA的概念就和它的名字一样显而易懂,就是整个网站不再像传统的 ...
- SPA(单页面web应用程序)
单页web应用(single page web application,SPA),就是只有一张web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序. 浏览器一 ...
- 通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
- SPA单页面应用和MPA多页面应用(转)
原文:https://www.jianshu.com/p/a02eb15d2d70 单页面应用 第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的 ...
- spa单页面应用(angular)
本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构. 简单理解:单页面应用,锚点值切换,一个路由对应一个页面. 路由:此时会创建一个信息保存路由的信息,之后对页面a标签 ...
- SPA 单页面应用程序。
看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚 自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现 ...
随机推荐
- centos 6.5 查看时区和设置时区
centos6.x 和centos7.x在时区方面有点差距,本文是针对centos6.x进行介绍. 其实在我的一个博文里,在安装系统的时候就可以进行时区的设置,本文介绍的是用命令进行时区查看和设置. ...
- dom 事件主要内容
一 . onclick(单击) 原图 单击btn1 在点击btn2 二 . onfocus 和 onblur onfocus(聚焦, 鼠标点击输入框) onblur(模糊, 鼠标点击输入框外的地方) ...
- shell中的>,2>&1,&>file 解析记录
0 表示标准输入1 表示标准输出2 表示标准错误输出> 默认为标准输出重定向,与 1> 相同2>&1 意思是把 标准错误输出 重定向到 标准输出.&> ...
- 老男孩python学习自修第十四天【序列化和json】
序列化是使用二进制的方式加密列表,字典或集合,反序列化是解密的过程:序列化开启了两个独立进程进行数据交互的通路 使用pickle进行序列化和反序列化 例如: pickle_test.py #!/usr ...
- vscode git设置远程仓库码云
https://www.cnblogs.com/klsw/p/9080041.html
- scrapy 项目搭建
安装好scrapy后,开始创建项目 项目名:zhaopin 爬虫文件名:zhao 1:cmd -- scrapy startproject zhaopin 2:cd zhaopin,进入项目目 ...
- Python——Radiobutton,Checkbutton参数说明
anchor : 文本位置: background(bg) : 背景色: foreground(fg) :前景色: borderwidth : 边框宽度: width : 组件的宽度: hei ...
- Java调用.NET 的Web Service服务故障排除
参考路径:http://blog.sina.com.cn/s/blog_4c925dca01014y3r.html
- 【python练习题】程序9
#题目:暂停一秒输出. import time for i in range(5): print (i) time.sleep(1)
- endnote中文格式“,等”的修改
https://www.howsci.com/endnote-eng-cn-refer-etal.html