Pjax的学习使用_小_杭的博客-程序员ITS301

技术标签: 笔记  java  用户体验  pjax  前端  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, 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
小杭


####测试使用的代码:

小杭测试



在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/TianXueWu/article/details/76687222

智能推荐

apache php httpc,关于apache:HTTP2和继续执行PHP_麟翛的博客-程序员ITS301

运行PHP时,您希望它立即将HTML返回浏览器,关闭连接(ish),然后继续处理...当连接为HTTP / 1.1时,以下方法有效,但使用Apache 2.4.25且启用了mod_http2时,此方法无效,并且您的浏览器支持HTTP / 2(例如Firefox 52或Chrome 57)。发生什么情况是Connection: close标头未发送。function http_connection_...

【最强】Android 项目集成 Flutter 实战分享,GitHub标星8k_k186____5189的博客-程序员ITS301

workspace├── android_project└── flutter_moduleandroid_project是我们现有的 Android 工程代码目录。flutter_module是我们新增的 fluuter 模块代码目录,将两个工程放到同一目录下。为了统一配置,建议必须按照这个目录结构进行管理两个工程的代码。注意:flutter_module是 module,不是 project 类型,在 Android Studio 中一定要选择 File &gt; New &gt; New Mo

mongodb导入到mysql数据库_ITIRONMAN的博客-程序员ITS301_mongodb导入mysql

1、使用Studio 3T导出数据为CSV2、写python脚本import pandas as pdimport pymysqlimport datetimeclass DBHelper: def __init__(self, dbName, env): if env == "dev": self.host = "10.33.43.19" self.port = 3306 self.user

linux任何用户ssh正确密码登陆均报错Permission denied, please try again.处理方法,linux限制root直登后普通用户输入正确密码提示密码错误处理方法。_/*守护她的笑容的博客-程序员ITS301_ssh密码正确但是密码错误

文章目录说明报错日志内容查看secure日志查看【知道就行】messages日志查看【这里面有记录】处理方法key文件删除修改配置文件中的UsePAM上面步骤过程测试自己可以ssh自己了工具也可以正常连接了别的服务器ssh自己【必看】说明我的一台虚拟机IP是:192.168.59.133出问题了,任何服务器使用任何用户ssh均报错,甚至连自己都不能ssh自己。也不能使用任何工具连接上该服务器,报错如下ssh报错如下任何服务器ssh报错内容均一样:报错内容均为:Permission d

最大限度原样输出含特殊字符的指定行内容+简析环境变量和变量延迟特殊字符以及中介法的微妙关系_Dreamspark的博客-程序员ITS301

http://cndos.fam.cx/forum/viewthread.php?tid=30815在CMD中,对含特殊字符的文本内容的输出处理一直是件很令人头痛的事情:如果要兼容特殊字符,一般会用引号把内容括起来再输出,但是这样一来,就会在所有输出行的首尾都添加了引号,如果对输出后的引号十分在意的话,这个方案就没法实行了。可是,除了这个方案之外,似乎没有别的方案能完美地解决这个难题。(注

mybatis驼峰映射_TxCode的博客-程序员ITS301_mybatis 驼峰映射

问题mybatis自定义的SQL语句中,如select语句,如果数据库表的字段为驼峰命名,即如user_name这样的形式,那么select语句执行的结果会变成null。解决办法是在配置文件中加上开启驼峰映射的配置信息。根据配置文件的类型分为以下两种:1.在.properties文件中添加:mybatis.configuration.map-underscore-to-camel-case=true 但如果已经在.properties中配置了mybatis.config-location=cl

随便推点

通信中dBFS、dBm、dBV、dBW、0dB、-3dB的定义(转)_andywu24的博客-程序员ITS301_dbfs

https://blog.csdn.net/wordwarwordwar/article/details/53208444dBV(V大写),dBu(u小写),是模拟音频时代最常用到的两个单位。简单来说专业音频领域,标准工作电平+4dBu。通常为平衡信号传输,例如卡农(XLR),大三芯(TRS)。民用音频领域,标准工作电平-10dBV。通常为非平衡信号传输,例如莲花(RCA),大二芯(TS)。两者之...

JavaScript 代码简洁之道 _weixin_34194359的博客-程序员ITS301

摘要: 可以说是《Clean Code》的JS代码示例了,值得参考。原文:JavaScript 代码简洁之道作者:缪宇Fundebug经授权转载,版权归原作者所有。测试代码质量的唯一方式:别人看你代码时说 f * k 的次数。代码质量与其整洁度成正比。干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。本文并不是代码风格...

Genymotion打开失败或者Oracle VM VirtualBox解决方案_Rex叶然的博客-程序员ITS301

Oracle VM VirtualBox报错不能为x虚拟机创建一个新任务Genymotion官网下载安装打开老是失败 网上说换什么dll。什么必须装C盘。还有什么必须装一起。什么中文路径?再又说什么通讯协议都是鬼扯没用。最后结果就是Oracle VM VirtualBox版本新点的光问题。这个版本测试是很稳定的下载原来的替换这个就OK了。

软件测试面试总结——常见的面试问题_编程简单学的博客-程序员ITS301_功能测试面试常见问题

前言在这里还分享一波我在B站看到面试相关的视频吧!感兴趣的小伙伴可以去看看https://www.bilibili.com/video/BV1p44y1H7Nc【2022最新软测面试合集】备战金三银四,整整耗时1周,终于把牛客网上热度最高的软件测试面试题整理成合集了_哔哩哔哩_bilibili1.软件测试级别?单元测试:单元测试是对软件组成单元进行测试。其目的是检验软件基本组成单位的正确性。测试的对象是软件设计的最小单位:模块。Findyou又称为模块测试,一个单元测试是用于判断...

SDN-流表分析与增删改查_lady_killer9的博客-程序员ITS301_查看流表

目录基于OpenFlow的SDN网络拓扑代码——mytopo.py流表操作查看流表删除流表添加流表基于OpenFlow的SDN网络基于OpenFlow的SDN网络上图以主机h1向网络发送数据包时的情况为例,若发送给主机h2,则路线为①②③⑥,每条路径的解释见图注。若读者没有了解过OpenFlow协议,请参考下面的文章,可以看看里面的数据结构,以及Packeti...

使用SimpleDateFormat,DateTimeFormatter和ZonedDateTime简单处理一些系统当前时间_Dark Sky.的博客-程序员ITS301

使用SimpleDateFormat,DateTimeFormatter和ZonedDateTime简单处理一些系统当前时间 public static void main(String[] args) { String timeType = getTimeConfig("application.properties"); System.out.println("====SimpleDateFormat====="); SimpleDateForma