我们都知道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

标签:
无刷新,更改页面url,pjax

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“使用pjax实现无刷新更改页面url”

暂无“使用pjax实现无刷新更改页面url”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?