以前我们点击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经典编程题50道之二十五

    一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. public class Example25 {    public static void main(Stri ...

  2. HDU 5056

    题意略. 巧妙的尺取法.我们来枚举每个字符str[i],计算以str[i]为结尾的符合题意的串有多少个.那么我们需要处理出str[i]的左边界j,在[j,i]之间的串均为符合题意的 串,那么str[i ...

  3. Java反射获取字节码以及判断类型

    一.获取类的字节码的三种方法: 1.使用Class.class   Class<?> c1=String.class; 2.使用实例.getClass()   String s= Clas ...

  4. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  5. QPS/TPS简介

    系统吞度量要素 一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高,外部系统接口.IO影响速度越慢,系统吞吐能力越低,反之越高 ...

  6. LOJ6001 - 「网络流 24 题」太空飞行计划

    原题链接 Description 有个实验和个仪器,做实验有报酬买仪器有花费.每个实验都需要一些仪器,求最大净收益(实验报酬仪器花费),并输出一组方案. Solution 实验向所需仪器连边,实验的点 ...

  7. 记Windows10下安装Docker的步骤

    本文主要是记录吾八哥本人在Windows10下安装Docker的过程,当然这些步骤也是在网上搜索查阅资料得知而来的!具体步骤如下: 一.启用Hyper-V 打开控制面板 - 程序和功能 - 启用或关闭 ...

  8. 用感知机(Perceptron)实现逻辑AND功能的Python3代码

    之所以写这篇随笔,是因为参考文章(见文尾)中的的代码是Python2的,放到Python3上无法运行,我花了些时间debug,并记录了调试经过. 参考文章中的代码主要有两处不兼容Python3,一个是 ...

  9. 基于Python的Flask的开发实战(第一节Flask安装)

    1.安装python虚拟环境 easy_install virtualenv easy_install pip cd /home/admin virtualenv flask-website sour ...

  10. jquery 上传图片转为base64,ajax提交到后台

    支持多张图片上传.图片上传数量修改.可以删除 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...