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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery实现日历效果
Sep 11 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
4.与数据库的连接
2006/10/09 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
梳理一下vue中的生命周期
2020/12/30 Vue.js
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python any()函数的使用方法
2019/10/28 Python
基于python实现把图片转换成素描
2019/11/13 Python
使用Python构造hive insert语句说明
2020/06/06 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
军训学生自我鉴定
2014/02/12 职场文书
爱心捐款倡议书
2014/04/14 职场文书
培训协议书范本
2014/04/22 职场文书
努力学习保证书
2015/02/26 职场文书
教师师德工作总结2015
2015/07/22 职场文书