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获取table下某一行某一列的值实现代码
Apr 07 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Jquery动态列功能完整实例
Aug 30 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
Python yield使用方法示例
2013/12/04 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Sanic框架应用部署方法详解
2018/07/18 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
房屋改造计划书
2014/01/10 职场文书
运动会通讯稿100字
2014/01/31 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
党员转正意见怎么写
2015/06/03 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python