首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

具有ajax更新的页面在按下浏览器后退按钮后不会记住状态

是因为ajax是一种异步请求技术,它通过在后台与服务器进行数据交换,实现页面的局部更新,而不需要重新加载整个页面。当用户按下浏览器的后退按钮时,浏览器会回退到上一个页面的状态,但由于ajax更新的页面并没有重新加载,所以页面的状态也没有被记录下来。

为了解决这个问题,可以使用以下方法之一:

  1. 使用HTML5的History API:History API允许开发者在浏览器历史记录中添加自定义状态,通过pushState()方法可以将当前页面的状态添加到历史记录中,然后在popstate事件中监听浏览器后退按钮的点击,并根据历史记录中的状态进行页面的更新。
  2. 使用URL参数:在ajax更新的页面中,可以将页面的状态作为URL参数传递,例如http://example.com/page?status=1,当用户按下后退按钮时,浏览器会回退到上一个页面的URL,通过解析URL参数可以获取到页面的状态,并进行相应的处理。
  3. 使用cookie或localStorage:在ajax更新的页面中,可以将页面的状态保存在cookie或localStorage中,当用户按下后退按钮时,可以从cookie或localStorage中读取页面的状态,并进行相应的处理。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ajax与jQuery异步加载数据

将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成开始加载Ajax数据,此时,浏览器不会有加载条和转圈情况出现。...在动态更新页面的情况,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中静态页面。...一个被完整读入页面与一个已经被动态修改过页面之间可能差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们前一次操作,但是在Ajax应用程序中,却无法这样做。...不过开发者已想出了种种办法来解决这个问题,HTML5之前方法大多是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏IFRAME来重现页面变更。...(例如,当用户在Google Maps中单击后退时,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态)。

10.9K20

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

但也存在这一些问题: 再刷新页面页面就会变成初始状态 浏览器前进后退功能无效 对搜索引擎爬虫抓取不友好  1、 早前会使用浏览器 hash锚点 来解决 不同hash标记着页面不同部分...,能修正页面刷新数据不正确问题 再通过 onhashchange 事件监听hash锚点变化,手动进行前进后退操作,浏览器支持度 Chrome FireFox IE Opera Safari 5.0...这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url也能获取相应数据 history.pushState(state, title, url) history.replaceState...(操作只会改变地址栏url,并不会立马加载这个url,可以简单标记 ?...,或者直接将该标记页对应结果直接存起来 随着后退操作,地址栏url得到了更新,异步数据也得到了更新 刷新页面或新打开页面,就要根据url中标记去请求数据了 要记住是,浏览器不会自动加载url这部分标记对应这个异步内容页

2.4K10
  • 前端Ajax技术原理

    根据这样原理所以Ajax实现了静态页面在不刷新整个页面的情况与服务器通信,减少了用户等待时间,增强用户体验友好程度 image.png Ajax工作流程: Ajax通过XmlHttpRequest...对象来向服务器发出异步请求,从服务器获得数据,然后用Javascript来操作DOM而更新页面。...下面所阐述ajax缺陷都是它先天所产生。 1、ajax干掉了back按钮,即对浏览器后退机制破坏。后退按钮是一个标准web站点重要功能,但是它没法和js进行很好合作。...答案是肯定,用过Gmail知道,Gmail下面采用ajax技术解决了这个问题,在Gmail下面是可以后退,但是,它也并不能改变ajax机制,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录时...(例如,当用户在Google Maps中单击后退时,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态。)

    65200

    AJAX常见面试问题

    页面不进行跳转刷新时候,异步处理数据时候,表单自动补全功能—-使用Ajax, 提交不再使用原页面,可以进行跳转刷新,查询之类功能,可以不用Ajax 优点: .无刷新更新数据。...缺点: .AJAX干掉了Back和History功能,即对浏览器机制破坏。 在动态更新页面的情况,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中静态页面。...一个被完整读入页面与一个已经被动态修改过页面之间差别非常微妙;用户通常会希望单击后退按钮能够取消他们前一次操作,但是在Ajax应用程序中,这将无法实现。...一个相关观点认为,使用动态页面更新使得用户难于将某个特定状态保存到收藏夹中。...(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮争论。 .AJAX安全问题。

    1.8K20

    Ajax篇(003)-Ajax优缺点?

    答案: 优点: 1.页面无刷新更新数据:Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。...,具有更加迅速响应能力。...缺点: 1.Ajax干掉了Back和History功能,即对浏览器机制破坏:在动态更新页面的情况,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中静态页面。...一个被完整读入页面与一个已经被动态修改过页面之间差别非常微妙;用户通常会希望单击后退按钮能够取消他们前一次操作,但是在Ajax应用程序中,这将无法实现后退按钮是一个标准web站点重要功能....违背URL和资源定位初衷:我给你一个URL地址,如果采用了Ajax技术,也许你在该URL地址下面看到和我在这个URL地址看到内容是不同

    60710

    HTML5 简介(三):利用 History API 无刷新更改地址栏

    地址栏地址就会变成renfei.org/profile/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。...「前进」、「后退按钮时,就会触发popstate事件。...假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧内容需要更新,那么刷新整个页面无疑是浪费。这时我们可以使用 AJAX 来拉取右面的数据。...但是如果仅仅这样,地址栏是不会改变,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。这时,就可以使用 HTML5 History API 来解决这个问题。...为了处理用户前进、后退,我们监听popstate事件。当用户点击前进或后退按钮时,浏览器地址自动被转换成相应地址,同时popstate事件发生。

    2.3K10

    ASP.Net开发基础温故知新学习笔记

    三、状态传递与保持   (1)经典URL传递: ①优点:简单直接,明确发给谁,数据不会乱;      ②缺点:无法保密,安全性不高   (2)隐藏字段传递: ①会加大网站流量;      ②会降低访问速度...外还有更新Cookie;      ②生命周期:如果没有设定Expires过期时间,那么关闭浏览器则终止Cookie;如果设定了Expires过期时间,则以过期时间为准作为失效时间;      ③缺点限制...=异步JavaScript和XML,一种进行页面局部刷新技术;      ②AJAX通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,从而改善用户体验效果;   (3)AJAX基本流程...}   (5)AJAX优点缺点:      ①优点:页面无刷新,在页面内与服务器通信,给用户体验非常好;“按需取数据”,可以最大程度减少冗余请求和响应对服务器造成负担;基于XML标准化,并被浏览器广泛支持...,不需安装插件等;      ②缺点:由于AJAX只是局部刷新,所以页面后退按钮是没有用(破坏了后退按钮机制);对流媒体还有移动设备支持不是太好; 五、客户端不可信   (1)客户端验证不能代替服务端验证

    2.2K10

    JavaWeb防止表单重复提交几种方式

    一、表单重复提交常见应用场景 网络延迟情况用户多次点击submit按钮导致表单重复提交 用户提交表单,点击【刷新】按钮导致表单重复提交(点击浏览器刷新按钮,就是把浏览器上次做事情再做一次,因为这样也会导致表单重复提交...) 用户提交表单,点击浏览器后退按钮回退到表单页面后进行再次提交 二、防止防止表单重复提交方式 1、利用JavaScript防止表单重复提交 (1)、用JavaScript控制Form表单只能提交一次...(5)、提交重定向到一个提交成功页面 表单提交跳转到另外一个成功页面。这样可以避免用户按F5导致重复提交,浏览器不会出现表单重复提交警告,以及消除按浏览器前进和后退按导致同样问题。...与此同时将token放到页面的隐藏input中,发给浏览器。用户在页面上提交时带着这个token一块提交到服务端,服务端通过比对token值。...(7)、cookie记录表单提交状态 使用Cookie记录表单提交状态,根据其状态可以检查是否已经提交过表单。

    2.2K20

    ajax无刷新页面切换,历史记录后退前进解决方案

    问题描述 我们在工作中常常遇到需要用ajax来显示下一页和上一页,ajax可以不刷新页面进行操作!但是,假如你想通过浏览器历史记录返回上一页和下一页。那么ajax默认是做不到!...history.state 当前URL对应状态信息。如果当前URL不是通过pushState或者replaceState产生,那么history.state是null。...history.replaceState 用新state和URL替换当前。不会造成页面刷新。 state:与要跳转到URL对应状态信息。...window.onpopstate history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷时候(由于使用pushState修改了history)会触发popstate...而当有浏览者点击浏览器后退”或“前进”按钮时,我们用下面的代码来响应用户操作: window.onpopstate = function(event){ if(event.state){

    1.4K30

    ASP.NET 调味品:AJAX

    其次,我们将确保当用户关闭其浏览器或导航到其他位置时,解除对文档锁定。一个功能帮助确保文档不会永远处于锁定状态。...、导航到其他链接或单击“后退按钮时,将自动解除文档锁定。... //如果用户关闭浏览器或点击“后退按钮, //确保该文档会被解除锁定 window.onbeforeunload = ReleaseLock...您将必须处理这样情况:存在某些不参与 ViewState 数据(这一点我们在按钮单击事件中可以看到)。 另一个需要考虑AJAX 对您网站可用性影响。...其次,AJAX 应用程序可能不熟悉(即使它具有较高级别)用户习惯使用应用程序方式。例如,通过 AJAX 执行不同功能页可能不以用户认为方式表现“后退按钮、“收藏夹”菜单和其他浏览器功能。

    3.7K50

    简述ajax实现原理_空气净化器原理

    当然,这种变化也并不会将桌面软件全部淘汰,现有的浏览器还没有一个能像PhotoShop等桌面程序那样处理复杂图像。但是我们也不能忽视它带来影响和冲击。...这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本结果写入页面,这和普通web开发流程是一样,不同是,客户端在异步获取这个结果,不是直接显示在页面,而是先由javascript...下面所阐述ajax缺陷都是它先天所产生。 1、ajax干掉了back按钮,即对浏览器后退机制破坏。后退按钮是一个标准web站点重要功能,但是它没法和js进行很好合作。...答案是肯定,用过Gmail知道,Gmail下面采用ajax技术解决了这个问题,在Gmail下面是可以后退,但是,它也并不能改变ajax机制,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录时...(例如,当用户在Google Maps中单击后退时,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态。)

    33920

    HTML5学习-day02【悟空教程】

    因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论第XX页XX楼。 这就是问题。试想一,如果浏览器记住你当前状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了?...结合两者 现在我们就可以想到,如果在Ajax更新页面局部内容同时,也在地址栏URL里更新状态参数,就可以做出更完美的Ajax翻页了。...调用pushState()方法将新生成一条历史记录,方便用浏览器后退”和“前进”来导航(“后退”可是相当常用按钮)。...但实际上,它条件是比较苛刻,几乎只有点击浏览器“前进”、“后退”这些导航按钮,或者是由JavaScript调用history.back()等导航方法,且切换前后两条历史记录都属于同一个网页文档...这个demo中主要涉及到3类资源,两个页面,我们观察3类资源在不同场景浏览器appcache策略。

    1.7K30

    locationhash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

    在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个时候深入学习了一hash特性。  ...当只有hash部分发生变化时,浏览器历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏uri会变化但页面内容不变。  ...下面就讲述一hash结合ajax使用,ajax每次取数据时页面更新浏览器并不产生历史记录,也就是说后退和前进按钮失去应用效用,这时可以结合hash和window.onhashchange来使用,...document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); 31 } 32 1.AjaxHasPool是自己封装ajax...类,其中ajax.Startup()就是发送ajax请求; 2.Object对象保存历史记录,如果对象属性为数字的话,要用obj["1"]方式来实例化,否者会违反命名规范。

    928100

    Browser 对象(一、history)

    URL,你现在加载他前一个或者一个,甚至前两个或者两个都不会有效果),代码才会执行,否则没有效果。...ajax请求来完成产品替换,作用是为了减少页面的加载。...但是他会出现一个很严重问题(由于页面没有重新加载,浏览器URL历史中在每次下一页不会新添加URL,因为只是局部刷新,所以不会添加新URL,这就导致了,浏览器返回上一页功能不能使用),pushState...、后退按钮行为,window.onpopstate就是解决这个问题。...调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为触发, 比如点击后退、前进按钮(或者在

    91610

    pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速浏览体验与真正永久链接、网页标题、以及浏览器后退前进按钮操作...然后更新无需重新加载你网页布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速外观,全页面加载。但它确实就是Ajax和pushstate。...请求中,不能更新地址栏,地址栏上“前进”和“后退按钮就失效了,带来了另外一种糟糕用户体验。...原因很简单——页面加载时候不会触发onhashchange事件。...,可以很好解决AJAX刷新后退/前进键失效问题,是一个新事件, 目前chrome ,firefox,Opera,  Safari,IE8及以上版本浏览器都兼容。

    2.4K50

    Human Interface Guidelines —— 导航栏(Navigation Bars)

    Navigation Bars 位置 Navigation Bars显示在app屏幕顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级屏幕进行导航。 ...内容 当显示一个新屏幕时,一个后退按钮(通常标有前一个屏幕标题)出现在该bar左侧。...大标题在所有应用程序中没有意义,永远不会与内容竞争。  尽管闹钟app具有tabbed layout,但大标题并不是必要,因为每个tab都具有明显、可识别的布局方式。 ...人们知道标准后退按钮可以让他们通过层级信息返回。但是,如果您实现了自定义后退按钮,请确保它仍然看起来像后退按钮,直观,与剩下页面交互方式保持匹配,并始终贯穿于您应用程序中。...·给文本标题按钮足够空间。如果navigation bar包含多个文本按钮,点击时这些按钮可能会一起运行,从而使按钮无法区分。可以在按钮之间插入固定空间项来添加分隔。

    2.4K110

    Ajax工作原理及实例「建议收藏」

    4、ajax原理和XmlHttpRequest对象   Ajax原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面...这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本结果写入页面,这和普通web开发流程是一样,不同是,客户端在异步获取这个结果,不是直接显示在页面,而是先由javascript...下面所阐述ajax缺陷都是它先天所产生。  1、ajax干掉了back按钮,即对浏览器后退机制破坏。后退按钮是一个标准web站点重要功能,但是它没法和js进行很好合作。...答案是肯定,用过Gmail知道,Gmail下面采用ajax技术解决了这个问题,在Gmail下面是可以后退,但是,它也并不能改变ajax机制,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录时...(例如,当用户在Google Maps中单击后退时,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态。)

    66010

    2019面试题:简单介绍Ajax

    Ajax是Web2.0技术核心由多种技术集合而成,使用Ajax技术不必刷新整个页面,只需对页面的局部进行更新,可以节省网络带宽,提高页面的加载速度,从而缩短用户等待时间,改善用户体验。 什么是同步?...直白地说,就是没用Ajax网页,你点一个按钮就要刷新一页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新。...用了AJAX之后,你点击,然后页面一行字就变化了,页面本身不用刷。 Ajax只是一种技术,不是某种具体东西。不同浏览器有自己实现AJAX组件。...Ajax缺点: 1.破坏了前进后退功能,用户往往通过后退按钮来取消上一步操作,但是使用ajax无法实现。...可以使用Gmail来解决这个问题,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏IFRAME来重现页面变更。 2.安全问题。

    56100

    必会vue面试题(附答案)

    值只是客户端一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送;hash 值改变,都会在浏览器访问历史中增加一个记录。...完成模板中html渲染到html 页面中。此过程中进行ajax交互。beforeUpdate(更新前):响应式数据更新时调用,此时虽然响应式数据更新了,但是对应真实 DOM 还没有被渲染。...后来,改变发生了——Ajax 出现了,它允许人们在不刷新页面的情况下发起请求;与之共生,还有“不刷新页面即可更新页面内容”这种需求。在这样背景,出现了 SPA(单页面应用)。...可能在一个站点经过了反复“前进”才终于唤出了某一块内容,但是此时只要刷新一页面,一切就会被清零,必须重复之前操作、才可以重新对内容进行定位——SPA 并不会记住”你操作。...前端路由可以帮助我们在仅有一个页面的情况,“记住”用户当前走到了哪一步——为 SPA 中各个视图匹配一个唯一标识。这意味着用户前进、后退触发新内容,都会映射到不同 URL 上去。

    1.1K40
    领券