以前我们点击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. 解决 java.lang.ClassNotFoundException: org.springframework.beans.factory.config.EmbeddedValueResolver

    1.今天用maven配置了一下dubbo的项目发现启动项目后意外报错: java.lang.ClassNotFoundException: org.springframework.beans.fact ...

  2. python针对端口11211进行全网收集

    前言: 最近Memcached分布式系统DRDoS拒绝服务攻击 一夜之内流量暴增.各种网站给打挂.原先打算写 一个poc可惜失败了. 0x01 requests模块 0x02 去钟馗之眼注册一个账号, ...

  3. 长整形的使用及cin加速

    _int64 和 long long 那么对ACMer来说,最为关心的就是在各个OJ上交题应分别使用哪种方式了.其实方式只有有限的几种: 如果服务器是linux系统,那么定义用long long,IO ...

  4. UVA-12166 天平性质+字符处理

    这题思维难度很大,关键是总结这个性质. 1.天平性质:某个秤砣重量为w,高度为h,如果要让这个天平平衡并且以这个秤砣为基准,那么整个天平的总重量为w*(2^h) 2.利用这个性质:题目要求秤砣数量改变 ...

  5. LOJ6002 - 「网络流 24 题」最小路径覆盖

    原题链接 Description 求一个DAG的最小路径覆盖,并输出一种方案. Solution 模板题啦~ Code //「网络流 24 题」最小路径覆盖 #include <cstdio&g ...

  6. python 小练习之生成手机号码

    需求分析: 1 将固定的号码段放到list中 如:136 137 180 183等等 2 随机取8个数字元素 3 将固定号码段与随机产生的元素拼接在一起 4 写入文件 import stringdef ...

  7. Redis笔记2-发布订阅

    发布/订阅"(publish/subscribe)模式可以实现进程间通信,订阅者可以订阅一个或多个频道(channel),而发布者可以向指定的频道发送消息,所有订阅次频道的订阅者都会收到次消 ...

  8. C++ string数据类型的实现

    #include <cstdlib> #include <cstring> class Mystring { public: Mystring(const char * pda ...

  9. 通过Activity动态加载Fragment创建主界面构架

    在做项目中,需要建立一个主界面框架,尝试过使用ViewPager ,后来又换成了使用Activity动态加载Fragment实现选项卡的效果.总结一下方便以后回顾. 先给出总体效果: 要实现上述效果, ...

  10. 解决MyEclipse中的Building workspace问题

    解决MyEclipse中的Building workspace问题 1.方法一 点击"Project",取消勾选"Build Automatically" 2. ...