以前我们点击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 用法总结的更多相关文章

  1. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  2. jQuery Pjax – 页面无刷新加载,优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  3. jquery.pjax.js bug问题解决集锦

    jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...

  4. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  5. jquery cookie 用法

    jquery cookie 用法 $.cookie("name","value","options")  当不设置options时,此coo ...

  6. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  7. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

  8. jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  9. jquery.post用法补充(type设置问题)

    jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...

随机推荐

  1. 2道acm简单题(2010):1.猜数字游戏;2.字符串提取数字并求和;

    //第一题是猜数字的游戏.//题目:随即产生一个3位的正整数,让你进行猜数字,//如果猜小了,输出:"猜小了,请继续".//如果猜大了,输出:"猜大了,请继续" ...

  2. 《android开发艺术探索》读书笔记(十)--Android的消息机制

    接上篇<android开发艺术探索>读书笔记(九)--四大组件 No1: 消息队列MessageQueue的内部存储结构并不是真正的队列,而是采用单链表的数据结构来存储消息列表,因为单链表 ...

  3. poj 2230详解

    题目链接 : poj2230 大致题意: 有一个人每晚要检查牛场,牛场内有m条路,他担心会有遗漏,就每条路检查两次,且每次的方向不同,要求你打印他行走的路径(必须从1开始),打印一条即可. 思路分析 ...

  4. 洛谷P3796 - 【模板】AC自动机(加强版)

    原题链接 Description 模板题啦~ Code //[模板]AC自动机(加强版) #include <cstdio> #include <cstring> int co ...

  5. mysql的常用引擎

    在MySQL数据库中,常用的引擎主要就是2个:Innodb和MyIASM. 首先: 1.简单介绍这两种引擎,以及该如何去选择.2.这两种引擎所使用的数据结构是什么. 1. a.Innodb引擎,Inn ...

  6. 2.4 PCI总线的配置

    PCI总线定义了两类配置请求,一个是Type 00h配置请求,另一个是Type 01h配置请求.PCI总线使用这些配置请求访问PCI总线树上的设备配置空间,包括PCI桥和PCI Agent设备的配置空 ...

  7. ffmpeg入门之 Tutorial01

    #include <libavcodec/avcodec.h>#include <libavformat/avformat.h>#include <libswscale/ ...

  8. JLINK 10针J和20针JTAG接口连接方法

    我的JLINK终于用上了,哈哈,好开心,终于不用考虑是不是要借用别人的PC机了,昨天到城隍庙电子市场忙活了一下午,终于算是满载而归,呵呵,好了,下面说一下接法,其实根本不需要什么转接板什么的,直接把相 ...

  9. Redis相关指令文档

    连接控制 QUIT 关闭连接 AUTH (仅限启用时)简单的密码验证 适合全体类型的命令 EXISTS key 判断一个键是否存在;存在返回 1;否则返回0; DEL key 删除某个key,或是一系 ...

  10. Linux显示内存统计最大和最小的详情

    Linux显示内存统计最大和最小的详情 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -l total used free shared buffe ...