jQuery pjax 应用简单示例


Posted in jQuery onSeptember 20, 2018

ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的Jquery库,使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

Pjax用在那儿?就说百度云盘吧,这个大家肯定都用过。百度云盘PC端,在点击打开某个文件夹后会打开这个文件夹下的文件,其实显示文件的这个div就用到了pjax技术。地址栏变换,内容更换,但是却是一个ajax请求。等到后退的时候,不必重新请求上一层文件夹的内容,因为是存在在历史记录中的。而且,开发者还可以选择时候使用cache和storage缓存。

DEMO1:

客户端:

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
 <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
 Go to <a href="res1.php">第一页</a>.<a href="res2.php">第二页</a>
 </div>
 <div id="container"></div> 
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>

服务器端:

res1.php

<?php 
echo "<div style='background:red;'>第一页</div>";

res2.php

<?php 
echo "<div style='background:red;'>第二页</div>";

解释:$(document).pjax('a', '#container')其中a是触发元素,#container是装载pjax返回内容的容器,下面也是这样。

DEMO2:

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
 <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
 Go to <a href="res1.php">第一页</a>.<a href="res2.php">第二页</a>
 </div>
 <div id="container"></div> 
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>

客户端:

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
 <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
 <input type="button" id="clickMe" value="GO">
 </div>
 <div id="container"></div> 
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
 $('#clickMe').click(function(){
 $.pjax({
  url: './res3.php',
  container: '#container'
 });
 });
});
</script>
</html>

服务器端代码:

res3.php:

<?php 
echo "<div style='background:red;'>第三页</div>";

源码:jQuery pjax

总结:

 此篇文章总结了一些大家常见的jQuery pjax 应用示例,喜欢的同学可以参考借鉴一下。

jQuery 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
jQuery使用each遍历循环的方法
Sep 19 #jQuery
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
You might like
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php实现数据库的增删改查
2017/02/26 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python箱型图处理离群点的例子
2019/12/09 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
纽约海:Sea New York
2018/11/04 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
预备党员表决心书
2014/03/11 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
材料化学专业求职信
2014/07/15 职场文书
第二次离婚起诉书
2015/05/18 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技