• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery pjax 简单入门

jQuery pjax 简单入门

作者:ltx06的专栏 字体:[增加 减小] 来源:互联网

ltx06的专栏通过本文主要向大家介绍了pjax,ajax,POST等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

工作站要做一个类似百度云盘的项目,其中提到了pajx技术,之前从来没接触过这个玩意,今天小试牛刀。去网上找了一些教程,只能说百度相当不靠谱,找到的东西几乎都不能用,还是GitHub好,么么哒!https://github.com/defunkt/jquery-pjax!

  Pjax是ajax的升级版,怎么理解呢,当初学习ajax的时候讲了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>
    <input 


 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery+pjax简单示例汇总
  • 通过pjax实现无刷新翻页(兼容新版jquery)
  • jQuery pjax 简单入门

相关文章

  • 分享8款优秀的 jQuery 加载动画和进度条插件
  • 对称加密与非对称加密优缺点详解
  • jQuery 3.0十大新特性
  • 30个经典的jQuery代码开发技巧
  • jQuery EasyUI常用数据验证汇总
  • 解决Jquery load()加载GB2312页面时出现乱码的两种方案
  • Jquery+CSS 创建流动导航菜单 Fluid Navigation
  • jQuery实现数秒后自动提交form的方法
  • jQuery内容过滤选择器用法分析
  • jquery实现在网页指定区域显示自定义右键菜单效果

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery焦点图切换特效代码分享
    • jQuery中的read和JavaScript中的onload函数的区别
    • jQuery导航条固定定位效果实例代码
    • jquery实现焦点轮播效果
    • Jquery ajax传递复杂参数给WebService的实现代码
    • jquery 获取json数据实现代码
    • tuzhu_req.js 实现仿百度图片首页效果
    • jQuery的ajax下载blob文件
    • Jquery ui css framework
    • JQuery中对Select的option项的添加、删除、取值

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有