使用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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
jQuery的ready方法详解
Nov 27 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
node thread.sleep实现示例
Jun 20 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
php加密解密字符串示例
2016/10/13 PHP
JavaScript 特殊字符
2007/04/05 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
JS实现简易日历效果
2021/01/25 Javascript
python调用shell的方法
2013/11/20 Python
Python判断操作系统类型代码分享
2014/11/22 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
团结就是力量演讲稿
2014/05/21 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
基于redis+lua进行限流的方法
2022/07/23 Redis
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers