解决浏览器记住ajax请求并能前进和后退问题
前端  /  管理员 发布于 4年前   187
在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户访问不同页面的先后顺序。
但是在开发中,我们经常会用到ajax技术去提升网页的用户体验。但是ajax本身并不改变浏览器地址栏中的url,是在同一个网页内部操作的,这时,浏览器并不会记录ajax请求的记录。在这种情况下,用户在一个页面触发的5次ajax请求后,点了后 退按钮,浏览器不会再次请求之前的ajax请求,而是返回了上一页。
解决这个问题的第一种方法就是利用location的hash值。当url的hash值改变时,页面并不会跳转,但是浏览器此时会将此带hash的url记录到历史记录中。利用这个特性,我们可以人为的模拟带历史记录功能的ajax请求。下面是这种方法的demo。
ul{ margin:0; padding:0;}li{ list-style: none; display: block; float: left; border: 1px solid #000; padding: 10px; margin-right: 20px; cursor: pointer;}li.active{ background-color: #000000; color: #fff;}<ul> <li data-id="1">1</li> <li data-id="2">2</li></ul>
先创建两个按钮,点击按钮时,向服务器发送请求,并将data-id通过参数带到服务器,服务器返回对应data-id的结果。
于此同时,改变按钮状态,并将location的hash值改为data-id的值。最后监听location的hash值变化,重复上述步骤。
function sendAjax(hash){ console.log("recived data:" + hash);}function btnStatus(hash){ $("li").removeClass('active'); $("li[data-id="+hash+"]").addClass('active');}function onHashChange(){ var curHash = window.location.hash.replace("#",""); if(curHash){ btnStatus(curHash); sendAjax(curHash); }}window.onhashchange = onHashChange;$("li").click(function(){ var id = $(this).attr('data-id'); window.location.hash = id;});
当我们点击按“1-2-1”这样的顺序点击按钮时,控制台的输出如下
recived data:1recived data:2recived data:2
此时我们连续按三次返回按钮,控制台输出如下
recived data:1recived data:2recived data:1
可见这样就模拟实现了浏览器记录ajax请求的功能。
以上所述是小编给大家介绍的让浏览器记住ajax请求并能前进和后退方法(一),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号