使用pjax实现无刷新页面的URL
1。可以在不刷新页面的情况下更改内容,但不能更改页面url。
2。哈希不是处理浏览器进展和后退的好方法。
为了解决传统Ajax的问题,加强历史API是HTML5,和pushstate,添加replacestate接口和popstate事件。没有详细的介绍,在这里,没有这方面的知识,学生们建议有关信息看第一。
The pjax plug-in encapsulates the pushState and Ajax operations and provides us with a simple way to develop this type of web application. 下面是以下步骤:
定义需要本地更新的容器
初始化pjax,监视URL
复制代码代码如下所示:
$(函数(){())
/ / pjax
$(document)。Pjax(A,#容器);
美元。pjax.reload(' #容器);
})
后端处理pjax请求
后端的处理逻辑是先决定它是否是pjax请求,如果是这样的话,它返回本地内容根据请求参数,否则将返回到布局,然后`美元。pjax.reload(' #容器),`开始pjax要求。根据以上逻辑,你可以写下面的代码:
复制代码代码如下所示:
无功pjaxfilter =功能(REQ,RES,下){
如果(req.get('x-pjax ')){
下一步();
返回;
}
如果pjax问 /直接返回布局模板
res.render('layout,{标题:'pjax简单演示});
};
router.get(/,pjaxfilter,功能(REQ,RES){
res.render('index);
});
router.get( / /:ID的诗,pjaxfilter,功能(REQ,RES){
无功poemid = req.params.id;
res.render('poem /+ poemid);
})
完整的代码:pjax演示
这是pjax最基本的功能,pjax提供了丰富的API,请访问:jQuery pjax