使用pjax实现无刷新更改页面url
我们都知道ajax给浏览器带来了异步加载的能力,在数据校验、局部刷新等方面提升了用户体验,但同时存在如下问题:
1.可以无刷新改变页面内容,但无法改变页面URL
2.hash的方式不能很好的处理浏览器的前进、后退等问题
为了解决传统ajax带来的问题,HTML5里加强了historyAPI,加入了pushState、replaceState接口和popstate事件。这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料。
pjax插件封装了pushState和ajax操作,为我们提供了一个开发这这类web应用的简单方法,具体步骤如下:
定义需要局部更新的容器
<divid="container"></div>
初始化pjax,监听URL
$(function(){ //pjax $(document).pjax('a','#container'); $.pjax.reload('#container'); })
后端处理pjax请求
后端的处理逻辑是,首先判断是不是pjax请求,如果是的话,根据请求参数返回局部内容,否则返回layout布局,然后由`$.pjax.reload('#container');`发起pjax请求。根据以上逻辑可以写出如下代码:
varpjaxFilter=function(req,res,next){ if(req.get('X-PJAX')){ next(); return; } //如果不是pjax请求的话直接返回布局模板 res.render('layout',{title:'Pjaxsimpledemo'}); }; router.get('/',pjaxFilter,function(req,res){ res.render('index'); }); router.get('/poem/:id',pjaxFilter,function(req,res){ varpoemId=req.params.id; res.render('poem/'+poemId); })
完整代码:pjax-demo
这只是pjax最基础的功能,pjax提供了丰富的api,请访问:jquery-pjax