jquery pjax 用法总结
以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面,中间可以很明显的看到短暂的白屏。pjax就很好的解决了这问题。
pjax的原理很简单,就是发送一个ajax请求,获取html代码,再把相关代码应用到指定容器中,就完成了pjax。pjax除了解决跳转白屏以外,还能替代iframe,让前端不得不使用iframe的场景大大减少。
一个最简单的pjax例子,只需要jQuery,不使用任何插件:
html:
<a class="leftPaneItem" onclick="writeMail()">写邮件</a> <div id="control"></div>
js:
function sentMail() {
$.ajax({
url:"./writeMail.html",
success:function (data) {
$("#control").html(data)
}
})
}
这里对writeMail.html有些特殊要求,需要在普通html页面的基础上去掉html、meta、body、title等标签,仅保留body内的部分。
如果有引用样式或者脚本可以照常引用,只是路径是相对于发送请求的页面,而不是被请求的页面。 有封装好的插件吗?答案是有的。
插件地址:https://github.com/defunkt/jquery-pjax 使用pjax插件的话,上面的js就可以改成:
function sentMail() {
$.pjax({
url:"./writeMail/writeMail.html", //请求的页面地址
container:"#control", //使用什么容器装载html
push:false, //是否模拟a链接跳转造成的url改变 })
}
如果想快速将页面内所有a标签替换成pjax的跳转方式可以写成这样:
$(document).pjax('a', '#container')
其中a是触发元素,#container是装载pjax返回内容的容器。 如果被请求的页面已经包含html、body之类的标签,请求来之后又不想要这些标签,可以这样写:
function sentMail() {
$.pjax({
url:"./writeMail/writeMail.html", //请求的页面地址
container:"#control", //使用什么容器装载html
push:false, //是否模拟a链接跳转造成的url改变
fragment:"body" //css选择器,被选中dom的内容会被抽取出来
})
}
有一点需要注意:如果使用pjax插件并且在配置里不设置push选项为false,则要求项目内所有经过pjax处理的链接必须采用绝对路径,否则跳转后再次跳转到相对路径则会导致404。
jquery pjax 用法总结的更多相关文章
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- jquery.pjax.js bug问题解决集锦
jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jquery cookie 用法
jquery cookie 用法 $.cookie("name","value","options") 当不设置options时,此coo ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- JQuery datepicker 用法
JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...
- jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...
- jquery.post用法补充(type设置问题)
jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...
随机推荐
- 2道acm简单题(2010):1.猜数字游戏;2.字符串提取数字并求和;
//第一题是猜数字的游戏.//题目:随即产生一个3位的正整数,让你进行猜数字,//如果猜小了,输出:"猜小了,请继续".//如果猜大了,输出:"猜大了,请继续" ...
- 《android开发艺术探索》读书笔记(十)--Android的消息机制
接上篇<android开发艺术探索>读书笔记(九)--四大组件 No1: 消息队列MessageQueue的内部存储结构并不是真正的队列,而是采用单链表的数据结构来存储消息列表,因为单链表 ...
- poj 2230详解
题目链接 : poj2230 大致题意: 有一个人每晚要检查牛场,牛场内有m条路,他担心会有遗漏,就每条路检查两次,且每次的方向不同,要求你打印他行走的路径(必须从1开始),打印一条即可. 思路分析 ...
- 洛谷P3796 - 【模板】AC自动机(加强版)
原题链接 Description 模板题啦~ Code //[模板]AC自动机(加强版) #include <cstdio> #include <cstring> int co ...
- mysql的常用引擎
在MySQL数据库中,常用的引擎主要就是2个:Innodb和MyIASM. 首先: 1.简单介绍这两种引擎,以及该如何去选择.2.这两种引擎所使用的数据结构是什么. 1. a.Innodb引擎,Inn ...
- 2.4 PCI总线的配置
PCI总线定义了两类配置请求,一个是Type 00h配置请求,另一个是Type 01h配置请求.PCI总线使用这些配置请求访问PCI总线树上的设备配置空间,包括PCI桥和PCI Agent设备的配置空 ...
- ffmpeg入门之 Tutorial01
#include <libavcodec/avcodec.h>#include <libavformat/avformat.h>#include <libswscale/ ...
- JLINK 10针J和20针JTAG接口连接方法
我的JLINK终于用上了,哈哈,好开心,终于不用考虑是不是要借用别人的PC机了,昨天到城隍庙电子市场忙活了一下午,终于算是满载而归,呵呵,好了,下面说一下接法,其实根本不需要什么转接板什么的,直接把相 ...
- Redis相关指令文档
连接控制 QUIT 关闭连接 AUTH (仅限启用时)简单的密码验证 适合全体类型的命令 EXISTS key 判断一个键是否存在;存在返回 1;否则返回0; DEL key 删除某个key,或是一系 ...
- Linux显示内存统计最大和最小的详情
Linux显示内存统计最大和最小的详情 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -l total used free shared buffe ...