Ajax请求如何实现页面无刷新前进后退，将ajax请求保存至浏览器历史记录

最新推荐文章于 2021-08-06 06:41:57 发布

一直在行走的菜鸟

最新推荐文章于 2021-08-06 06:41:57 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javaScript pushState

本文链接：https://blog.youkuaiyun.com/qq_29837681/article/details/79478056

在Ajax异步请求后，浏览器无法感知用户操作，导致无法前进后退。解决办法是利用浏览器API将URL放入历史记录。通过pushState方法更新地址，并绑定前进后退事件，使页面在前进后退时能正确响应。此外，建议后端接口设计兼容页面请求和Ajax请求的参数，简化处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

既然能看到这个帖子说明你碰到这个问题了，使用Ajax异步请求后浏览器不知道用户操作了那些，不可以前进后退，最关键是不是收藏和分享，因为地址栏一直没有修改过。

不闲扯，上干货，代码很简单，就是通过浏览器提供的api将 url put进浏览器历史记录就好啦。

一、将地址put进浏览器历史记录

    var stateObject = {"data":window.location.search};     //浏览器的上一次参数信息
    var title; //标题（一般就忽略了）
    var newUrl = window.location.pathname+"?page="+page+"&thirdGenreId="+thirdGenreId; //最关键部分，新的浏览器地址，执行下面操作这个地址会显示到浏览器地址栏
    history.pushState(stateObject,title,newUrl);//共三个参数

二、给页面的前进后退绑定事件，这样前进后退页面才会有反应

	//前进后退绑定事件
	window.addEventListener("popstate", function() {
          //下面注释的两句写的是获取当前（后退后的）地址栏的参数和请求路径，进行一次重定向，但是后来发现了一个好方法，用reload方法可以刷新当前页面 2333；
	  //var currentState = window.location.search; 
	  //window.location.href=window.location.pathname+window.location.search;
	    location.reload();
	});

最后再给大家说一个我使用中的一个小技巧（偷懒），后端设计异步请求接口时将页面请求参数和ajax请求参数设置为通用，这样你的参数直接put进浏览器，改改参数就好。