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 相关文章推荐
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 和 MYSQL
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php表单提交问题的解决方法
2011/04/12 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python3.6正式版新特性预览
2016/12/15 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
小学生家长意见
2015/06/03 职场文书
高中开学感言
2015/08/01 职场文书
中秋节随笔
2015/08/15 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android