使用pjax实现无刷新页面的URL

使用pjax实现无刷新页面的URL
我们都知道Ajax给浏览器带来异步加载功能,提高了用户在数据验证和本地刷新方面的经验。

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

tag:无刷新页面电脑软件pjaxurl

相关内容