Pjax的学习使用

发布时间：2020-12-16 03:21:44 所属栏目：百科来源：网络整理

导读：Pjax的使用简介：是一种页面局部刷新的功能，基于Ajax的。其不同之处在与，插件可以默认绑定替换刷新的div，同时会有浏览器的历史记录【可以进行前进后退操作】。其中有一个很重要的组成部分，这些网站的ajax刷新是支持浏览器历史的，刷新页面的同时，

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,0.52);">
        hello  这是变化的部分  会变成demo2 页面的 表格
    </div>

页面是可以正常的更新了<div id = "pjax-container">的。O(∩_∩)O~

参数详情:

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	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

例如【发送和完成事件】：

在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=22222" >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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!