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

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

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

1. 可以无刷新改变页面内容，但无法改变页面URL

2. hash的方式不能很好的处理浏览器的前进、后退等问题

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

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

定义需要局部更新的容器

初始化pjax，监听URL

复制代码 代码如下:

$(function(){

// pjax

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

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

})

后端处理pjax请求

后端的处理逻辑是，首先判断是不是pjax请求，如果是的话，根据请求参数返回局部内容，否则返回layout布CsUjeLm局，然后由`$.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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。