当前位置:首页 > 日记 > 正文

使用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

相关文章

javascript基本知识学习笔记

javascript基本知识学习笔记

基本知识,学习笔记,电脑软件,javascript,javascript简介 首先,定义:Javascript是一种脚本语言,它需要一个主机文件,它的主机文件是一个HTML文件。 Javascript是一种轻量级编程语言。 Javascript是一种可以插入HTML页面的编程代码。 在将Javascript插入到HTML页面之后,它可…

我自己用的global.js库源代码共享

我自己用的global.js库源代码共享

源代码,电脑软件,global,js,var全局{ }; global.namespace =功能(STR){ var arr = str.split(,),O =全球,我; 对(我=(ARR { 0 } =全球)1:0;i O { {我} } = O ARR ARR { } } {我| | { }; O = O { } } {我到达; } }; DOM相关 global.namespace(DOM); global.dom…

一张可爱的小熊

一张可爱的小熊

小熊,可爱,电脑软件,本教程是介绍朋友用CDR渲染一个可爱的小熊的方法,渲染出来的老虎真的很可爱,有点难度,这个不是很详细,推荐给喜欢的朋友,可以跟着教程一起学习。 本教程教朋友用CDR画一只可爱的小熊,渲染难度大,画出老虎很可爱。转发,和朋友一…

js获取复选框值的方法

js获取复选框值的方法

方法,复选框,电脑软件,js,本文演示了JS获取复选框值的方式: 复制代码代码如下所示: js 函数aa(){ VAR r = document.getelementsbyname(R); 对于(var i = 0;i 如果(r。}。检查){ 警报({值}) } } } 一 B C D E F G H 我 J 希望本文能…

一种在Smarty模板引擎函数的定义方

一种在Smarty模板引擎函数的定义方

模板引擎,方法,函数,定义,电脑软件,本文介绍了Smarty自定义函数的方法,分享给你大家参考。以下是如下: 本例的目标:输出时间次数CON组的内容(输出4次Hello World) 文件1: 复制代码代码如下: / /创建Smarty对象 require_once(, / / Smarty库。类…

插画可爱卡通小狐狸插画

插画可爱卡通小狐狸插画

插画,小狐狸,卡通,可爱,电脑软件,本教程是教你如何用插画画可爱的卡通小狐狸插画,效果相当不错。本教程主要使用人工智能的基本形状、颜色匹配、变形工具等。方法非常简单,很多学生都会跟着教程说。我向你推荐它,希望对你有帮助。 本教程介绍…

基于javascript实现的自动提示搜索功能

基于javascript实现的自动提示搜索功能

自动提示,搜索功能,电脑软件,javascript,当数据量不大,并且没有与后端对应的功能接口时,一些简单的搜索功能基本上是通过前端实现的,这只是最近才使用的。 设计素描 uff1a 功能描述: 按下键盘后,输入词条中的汉字、拼音字母和汉字的数量。 实…

javascript核心读具有意义的类型、值和变

javascript核心读具有意义的类型、值和变

类型,变量,核心,意义,电脑软件,计算机程序的操作需要对值(值)进行操作,如数字3.14或文本Hello World。在编程语言中,值的类型可以表示和操作,称为数据类型(类型),和编程语言的最基本特征是主机的多个数据类型。当程序需要保持对未来的使用价值,它指…

白色背景橡皮擦将学习!PS抠图技术。

白色背景橡皮擦将学习!PS抠图技术。

抠图,学习,白色,背景,技术,橡皮擦工具必须熟悉我们,但我们经常使用它,通常只有普通橡皮擦。事实上,它扩展选项,有两个橡皮擦工具,可以帮助我们很多铺垫的帮助。Today Xiaobian介绍PS背景橡皮擦抠图技巧,小的学习教程,非常适合非常实用,推荐,一起学习…

PS图象处理软件容易让风吹海岸线动

PS图象处理软件容易让风吹海岸线动

动画,海岸线,图象,处理软件,电脑软件,本教程介绍给朋友,利用PS图象处理软件让风吹海岸线动画和标志的方法。教程的效果非常好,而且方法非常简单。非常适合初学者。我建议像你这样的朋友一起学习。 本教程介绍给朋友,利用PS图象处理软件让风吹…

精美珠宝人像摄影教程

精美珠宝人像摄影教程

教程,珠宝,人像摄影,精美,电脑软件,本教程是介绍一个朋友PS精致的珠宝人像摄影方法,本教程主要是介绍色彩技术,非常实用,值得学习PS的朋友们学习,推荐和分享学习。 本教程主要是介绍PS首饰人像后期的培训课程,效果非常精美。其主要思想是介绍配…

jQuery检索和显示JSON数据的方法

jQuery检索和显示JSON数据的方法

数据,显示,检索,方法,电脑软件,本文给出了jQuery如何接收JSON数据并显示它的示例,供大家参考: 下面的代码是页面中显示的一部分 复制代码代码如下:功能searchproductlistbyfiltercondition(指数型、排序、filterword){ / / cite_html 无功ci…