使用pjax实现无刷新更改页面url


Posted in Javascript onFebruary 05, 2015

我们都知道ajax给浏览器带来了异步加载的能力,在数据校验、局部刷新等方面提升了用户体验,但同时存在如下问题:

1. 可以无刷新改变页面内容,但无法改变页面URL
2. hash的方式不能很好的处理浏览器的前进、后退等问题

为了解决传统ajax带来的问题,HTML5里加强了history API,加入了pushState、replaceState接口和popstate事件。这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料。

pjax插件封装了pushState和ajax操作,为我们提供了一个开发这这类web应用的简单方法,具体步骤如下:

定义需要局部更新的容器

<div id="container"></div>
初始化pjax,监听URL

$(function(){

// pjax

$(document).pjax('a', '#container');

$.pjax.reload('#container');

})

后端处理pjax请求

后端的处理逻辑是,首先判断是不是pjax请求,如果是的话,根据请求参数返回局部内容,否则返回layout布局,然后由`$.pjax.reload('#container');`发起pjax请求。根据以上逻辑可以写出如下代码:

var pjaxFilter = function(req, res, next) {

if (req.get('X-PJAX')) {

next();

return;

}

//如果不是pjax请求的话直接返回布局模板

res.render('layout', { title: 'Pjax simple demo' });

};

router.get('/', pjaxFilter, function(req, res) {

res.render('index');

});

router.get('/poem/:id', pjaxFilter, function(req, res) {

var poemId = req.params.id;

res.render('poem/' + poemId);

})

完整代码:pjax-demo

这只是pjax最基础的功能,pjax提供了丰富的api,请访问:jquery-pjax

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
js验证密码强度解析
Mar 18 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 #Javascript
jquery手风琴特效插件
Feb 04 #Javascript
Jquery中find与each方法用法实例
Feb 04 #Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 #Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 #Javascript
15款jQuery分布引导插件分享
Feb 04 #Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
php中文字符截取防乱码
2008/03/28 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
用jscript实现新建word文档
2007/06/15 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
int和Integer有什么区别
2013/05/25 面试题
联村联户简报
2015/07/21 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Python 全局空间和局部空间
2022/04/06 Python