使用pjax实现无刷新更改页面url
更新时间：2015年02月05日 09:03:55 投稿：hebedich
pjax=pushState+ajax，相信用过github的同学都知道，github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一起来学习一下这个插件吧。
我们都知道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实现一个页面加载进度loading的具体步骤以及示例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了js实现黑白div块画空心的图形，画出矩形、三角形、菱形、圆形，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家详细介绍了Axios+Spring Boot实现文件上传和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家分享Bootstrap的图片轮播示例代码，小伙伴们快来围观吧。2015-08-08
本篇内容主要给大家讲了如何通过javascript解析JSON并得到数据后添加到HTML中的方法，需要的朋友参考下。2017-11-11
本文记录下JS中产生标识符方式的演变，从ES5到ES6，ES5及其之前是一种方式，只包含两种声明（var/function），ES6则增加了一些产生标识符的关键字，如 let、const、class。2015-06-06
这篇文章主要介绍了JavaScript实现简单Tip提示框效果,涉及JavaScript响应鼠标事件针对页面元素动态操作的相关技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了微信小程序实现滑动验证拼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
本篇文章主要介绍了微信小程序之ES6与事项助手的功能实现，具有一定的参考价值，有兴趣的同学可以了解一下。2016-11-11
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
这篇文章主要介绍了Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法，非常具有实用价值，需要的朋友可以参考下2017-08-08
最新评论