jquery-pjax 文档

2024年3月31日发(作者：)

pjax是什么

pjax是jquery的一个插件，它使用ajax和pushState两个技术改善用户的网

页浏览体验。具体来说，当用户使用a标签切换页面时，可以实现局部刷新的技

术。

pjax主要做两方面的事儿：

1. 用户点击链接发送ajax请求，服务器得到请求返回需要填充的HTML片段，

客户端得到HTML片段然后插入更新区域

2. 页面填充完毕后，使用pushState更新当前的URL

这个过程能实现页面局部刷新，比传统的页面切换刷新的体验好一些，因为：

1. 只下载需要的HTML页面片段，没有JS、CSS解析

2. 如果服务端配置了正确的pjax请求，则只返回要更新的HTML片段，客户

端只更新必要的内容，避免了页面重新渲染的过程。

如何使用

1. 客户端

客户端设置分两步：

1. 下载插件，包括jquery1.8+，或者npm安装，这部分参考文档，不赘述。

2. 初始化pjax插件，并有条件的拦截a标签跳转。

初始化

$.

下面代码表示：当selector被点击时，执行ajax请求，并将返回的HTML字符

串填充在container标记的位置。

$(document).pjax(selector, [container], options)

参数说明

selector：click事件的选择器



container：pjax容器id



options ：配置参数



pjax options

key

timeout

push

replace

version

scrollTo

type

dataType

container

url

target

fragment

default

650

true

false

description

ajax请求如果超时将触发强制刷新

使用 [pushState][] 在浏览器中添加导航记录

是否使用replace方式改变URL

返回的HTML片段字符串最大缓存数

当前pjax版本

当页面导航切换时滚动到的位置. 如果想页面切换

不做滚动重置处理，请传入false.

使用ajax的模板请求方法，参考 $.ajax

模板请求时的type，参考 $.ajax

内容替换的CSS选择器

maxCacheLength 20

0

"GET"

"html"

用于ajax请求的url，可以是字符串或者返回字符

串的函数

link

eventually the relatedTarget value for pjax

events

从服务端返回的HTML字符串中子内容所在的CSS选

择器，用于当服务端返回了整个HTML文档，但要求

pjax局部刷新时使用。

可以使用下面的方式动态设置options：

$.t = 1200

初始化一般的做法是做好HTML结构，有条件的触发pjax跳转请求：