Pjax的学习使用
来源:互联网 发布:淘宝的鹰眼系统 编辑:程序博客网 时间:2024/05/18 22:56
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【成功】
<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, 102, 0.52);"> hello 这是变化的部分 会变成demo2 页面的 表格 </div>
页面是可以正常的更新了<div id = "pjax-container">
的。O(∩_∩)O~
参数详情:
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东东自带的一些事件处理。
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 lifecycle on browser Back/Forward navigation
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例如【发送和完成事件】:
在pjax发送请求的时候调用事件pjax:send,完成更新页面之后回调事件pjax:complete;
$(document).on('pjax:send', function() { $('#loading').show()})$(document).on('pjax:complete', function() { $('#loading').hide()})
例如【pjax超时事件】:
pjax请求超时时调用自定义事件处理。
$(document).on('pjax:timeout', function(event) { // Prevent default timeout redirection behavior event.preventDefault()})
其他东东:
- pjax加载的页面中的中文乱码问题【为解决】
- 这个pjax如果和Jfinaly一起使用,似乎是不错的选择呢。
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, 102, 102, 0.52);"> hello 这是变化的部分 会变成demo2 页面的 表格 </div> <div id = "loading" style=" width: 100px; height: 100px; background-color: rgba(102, 102, 102, 0.52);"> .............................这个是loding </div> </div></body>
阅读全文
0 0
- Pjax的学习使用
- Yii2学习笔记(七):Pjax的使用
- pjax使用心得总结
- pjax使用心得
- Yii2 Pjax 使用
- pjax使用小结
- pjax 和 NProgress.js 的研究和使用
- yii使用自带组件pjax的请求
- pjax的原理
- Pjax
- pjax
- 在THinkPHP中使用pjax
- Pjax的介绍及妙用
- PJAX的实现与应用
- 关于pjax的一些坑
- PJAX的实现与应用
- Yii2 framework学习笔记(九) -- pjax
- Yii2 中 ActiveForm 和 GridView 使用 Pjax
- 用户填表有大量数据的数据提交解决方式
- [ASP.NET]内置对象简介
- WPF DataGrid DataGridTemplateColumn 列头checkbox如何在代码中取消选择
- QT与数据库的链接
- myeclipse发布项目到自定义文件夹
- Pjax的学习使用
- 剑指offer题解C++【24】二叉树中和为某一值的路径
- sonarQube之平台搭建及sonar-scanner扫描
- STL 知识点总结
- 机器学习转行之路:起点
- java中获取项目路径
- hibernate联级查询
- 毁灭
- QT 之 TCP/IP 服务器和客户端(一)