Pjax的使用
简介：
是一种页面局部刷新的功能，基于Ajax的。其不同之处在与，插件可以默认绑定替换刷新的div，同时会有浏览器的历史记录【可以进行前进后退操作】。
其中有一个很重要的组成部分， 这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。
优劣：
- 提高用户体验，减少带宽使用
- 浏览器兼容问题，服务器端的复杂
官方代码库
使用教程
最简单使用 $.fn.pjax 【失败了(ノ｀Д)ノ】
最简单的例子，使所有a标签都为pjax进行请求，内容替换第二个参数的div。
$(document).pjax('a','#pjax-container')
$(document).pjax('[data-pjax] a,a[data-pjax]','#pjax-container')
木有错就是这么简单，但是@H_403_36@我的测试失败了。
使用的时候，后台服务端接受到了两个请求：
String pjax_headerString = request.getHeader("X-PJAX");
System.out.println("is pjax? :"+pjax_headerString);
--is pjax? :true //这个是对的
--is pjax? :null //这个不知道是哪里来的(ノ｀Д)ノ 导致页面直接跳转刷新了
使用参数的用法$.pjax【成功】
<script type="text/javascript">
function test(){
$.pjax({url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime(),container: '#pjax-container'});
return false;
}
</script>
<button type="button" id="redbtn" onclick = "test()">测试 点这里 ↓↓div的内容会变化</button>
<div id = "pjax-container" style="width: 1000px;height: 300px;background-color: rgba(102,102,0.52);">
hello 这是变化的部分 会变成demo2 页面的 表格
</div>
页面是可以正常的更新了<div id = "pjax-container">的。O(∩_∩)O~
参数详情:@H_403_36@
| 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;
其他用法：$.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.[不添加一个浏览器历史记录。]
function test_reload(){
$.pjax.reload('#pjax-container',{url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime()});
//$.pjax.reload('#pjax-container',options); ←← 就是这个样子 ↑↑
}
其他用法：$.pjax.submit【测试成功√】
$(document).on('submit','form[data-pjax]',function(event) { //所需要修改的为第二个参数，确定页面中from表单，
$.pjax.submit(event,'#pjax-container')
})
其他用法：$.pjax.click【失败了(ノ｀Д)ノ】
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})
})
}
事件Events
Pjax东东自带的一些事件处理。
| 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,options |
always fires after ajax,regardless of result | |
pjax:end |
xhr,options |
event lifecycle on browser Back/Forward navigation
| 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()
})
例如【pjax超时事件】：
$(document).on('pjax:timeout',function(event) {
// Prevent default timeout redirection behavior
event.preventDefault()
})
其他东东：
2017-08-04
小杭
测试使用的代码：
<head>
<title>小杭测试</title>
<Meta name="decorator" content="default"/>
<script src="${ctxStatic}/jquery/jquery.pjax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on('submit','form',function(event) {
$.pjax.submit(event,'#pjax-container')
})
$(document).on('click','a',function(event) { //失败了(ノ｀Д)ノ
var container = $(this).closest('#pjax-container')
var containerSelector = '#' + container.id
$.pjax.click(event,{container: containerSelector})
})
$(document).on('pjax:send',function() {
$('#loading').show()
})
$(document).on('pjax:complete',function() {
$('#loading').hide()
})
function test(){
$.pjax({url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime(),container: '#pjax-container'});
return false;
}
function test_reload(){
$.pjax.reload('#pjax-container',{url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime()});
}
</script>
</head>
<body>
<div class="content">
<a href="${ctx}/statistics/simpleReport/xiaohangTestPjax?data=11111" >demo1</a>
<button type="button" id="redbtn" onclick = "test()">测试 点这里 ↓↓div的内容会变化</button>
<button type="button" id="redbtn" onclick = "test_reload()">reload </button>
<form id="searchForm" action="${ctx}/statistics/simpleReport/xiaohangTestPjax" method="post" class="breadcrumb form-search">
<label>表单提交测试-参数：</label> <input id="organId" name="organId" maxlength="32" class="input-medium"/>
<label>表单提交测试-参数：</label><input type="button" class="btn btn-primary" onclick="test_submit()" value="查询button"/> <input id="dsubmit" class="btn btn-primary" type="submit" value="查询submit"/>
</form>
<div id = "pjax-container" style=" width: 1000px; height: 300px; background-color: rgba(102,0.52);">
hello 这是变化的部分 会变成demo2 页面的 表格
</div>
<div id = "loading" style=" width: 100px; height: 100px; background-color: rgba(102,0.52);">
.............................这个是loding
</div>
</div>
</body> 原文链接：https://www.f2er.com/ajax/160913.html