Pjax的学习使用

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~

参数详情:
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, textStatus, 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
例如【发送和完成事件】:

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

阅读更多
版权声明:本文为博主工作学习的记录整理笔记╮(╯_╰)╭ https://blog.csdn.net/TianXueWu/article/details/76687222
文章标签: 用户体验 ajax pjax
个人分类: 笔记 java 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭