使用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请求获取数据达到异步更新视图的按钮,原理的实现 ...
随机推荐
- .Net中EF通用数据层小结
增删改查: using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; u ...
- VMware与CentOS的安装与Linux简单指令
一 . VMware与CentOS系统安装 下载CentOS系统的ISO镜像 # 官方网站,国外网站,下载速度会很慢 www.centos.org # 由于国外的下载速度慢,我们可以使用国内的镜像源 ...
- No module named 'ConfigParser'
系统: CentOS-6.4-x86_64 Python : Python 3.4.5 和 Python 3.5.2 安装 MySQL-python ,结果出错: ImportError: No mo ...
- HTML——标签说明
基本 <html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> ...
- c#处理json数据最好的方式,没有之一。
c#处理json数据最好的方式,没有之一. 引用Json.Net(需要.NET 4.5及以上版本) using Newtonsoft.Json.Linq; 使用非常简单 JObject result ...
- ADO.NET工具类(二)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- poj-1724(bfs+优先队列)
题意:有向图,给你m条边,每条边有两个权值,路径长和通过这条路径的花费,问你在不超过k花费的前提下,最短的路径从1走到n 解题思路:因为边数很少,我们可以直接用暴力每条边的方式来找最小的路径长,也就是 ...
- h.264并行熵解码
在前面讨论并行解码的章节中,我们专注于讨论解码的宏块重建部分,甚至把宏块重建描述成宏块解码,这是因为在解码工作中,宏块重建确实占了相当大的比重,不过解码还包含其它的部分,按照解码流程可粗略分为: 读取 ...
- sql server2012学习笔记
第1章 SQL安装 1-1 [SQL Server基础]前言 (10:44) 1-2 SQL Server安装 (08:29) 1-3 第一次登陆 SQL Server (02:58) 1-4 [ ...
- 监听导航新增Tab选项卡-layui
1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...