###Pjax的使用
####简介:
是一种页面局部刷新的功能,基于Ajax的。其不同之处在与,插件可以默认绑定替换刷新的div,同时会有浏览器的历史记录【可以进行前进后退操作】。
其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。
####优劣:
####官方代码库
github: jquery-pjax
###使用教程
#####最简单使用 $.fn.pjax 【失败了(ノ`Д)ノ】
最简单的例子,使所有a标签都为pjax进行请求,内容替换第二个参数的div。
$(document).pjax('a', '#pjax-container')
高级用法,可指定标签:如下
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')
木有错就是这么简单,但是我的测试失败了。
使用的时候,后台服务端接受到了两个请求:
String pjax_headerString = request.getHeader("X-PJAX");
System.out.println("is pjax? :"+pjax_headerString);
--is pjax? :true //这个是对的
--is pjax? :null //这个不知道是哪里来的(ノ`Д)ノ 导致页面直接跳转刷新了
#####使用参数的用法$.pjax【成功】
hello 这是变化的部分 会变成demo2 页面的 表格
页面是可以正常的更新了 设置参数的写法也可以是这样子的: #####其他用法:$.pjax.reload【测试成功√】 Initiates a request for the current URL to the server using pjax mechanism and replaces the container with the response. Does not add a browser history entry.[不添加一个浏览器历史记录。] #####其他用法:$.pjax.submit【测试成功√】 #####其他用法:$.pjax.click【失败了(ノ`Д)ノ】 ####事件Events Pjax东东自带的一些事件处理。 event lifecycle on browser Back/Forward navigation #####例如【发送和完成事件】: 在pjax发送请求的时候调用事件pjax:send,完成更新页面之后回调事件pjax:complete; #####例如【pjax超时事件】: pjax请求超时时调用自定义事件处理。 ####其他东东: 2017-08-04 ####测试使用的代码:参数详情:
key
default
description
timeout
650
ajax timeout in milliseconds after which a full refresh is forced
push
true
use pushState to add a browser history entry upon navigation
replace
false
replace URL without adding browser history entry
maxCacheLength
20
maximum cache size for previous container contents
version
a string or function returning the current pjax version
scrollTo
0
vertical position to scroll to after navigation. To avoid changing scroll position, pass
false
.
type
"GET"
see $.ajax
dataType
"html"
see $.ajax
container
CSS selector for the element where content should be replaced
url
link.href
a string or function that returns the URL for the ajax request
target
link
eventually the
relatedTarget
value for pjax events
fragment
CSS selector for the fragment to extract from ajax response
$.pjax.defaults.timeout = 12000;
$.pjax.defaults.replace = true;
function test_reload(){
$.pjax.reload('#pjax-container', {url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime()});
//$.pjax.reload('#pjax-container', options); ←← 就是这个样子 ↑↑
}
$(document).on('submit', 'form[data-pjax]', function(event) { //所需要修改的为第二个参数,确定页面中from表单,
$.pjax.submit(event, '#pjax-container')
})
if ($.support.pjax) {
$(document).on('click', 'a[data-pjax]', function(event) {
var container = $(this).closest('[data-pjax-container]')
var containerSelector = '#' + container.id
$.pjax.click(event, {container: containerSelector})
})
}
event
cancel
arguments
notes
event lifecycle upon following a pjaxed link
pjax:click
✔︎
options
fires from a link that got activated; cancel to prevent pjax
pjax:beforeSend
✔︎
xhr, options
can set XHR headers
pjax:start
xhr, options
pjax:send
xhr, options
pjax:clicked
options
fires after pjax has started from a link that got clicked
pjax:beforeReplace
contents, options
before replacing HTML with content loaded from the server
pjax:success
data, status, xhr, options
after replacing HTML content loaded from the server
pjax:timeout
✔︎
xhr, options
fires after
options.timeout
; will hard refresh unless canceled
pjax:error
✔︎
xhr, textStatus, error, options
on ajax error; will hard refresh unless canceled
pjax:complete
xhr, textStatus, options
always fires after ajax, regardless of result
pjax:end
xhr, options
event
cancel
arguments
notes
pjax:popstate
event
direction
property: “back”/“forward”
pjax:start
null, options
before replacing content
pjax:beforeReplace
contents, options
right before replacing HTML with content from cache
pjax:end
null, options
after replacing content
$(document).on('pjax:send', function() {
$('#loading').show()
})
$(document).on('pjax:complete', function() {
$('#loading').hide()
})
$(document).on('pjax:timeout', function(event) {
// Prevent default timeout redirection behavior
event.preventDefault()
})
小杭
小杭测试