通过 Ajax 页面跳转保留状态

Posted 2021-04-15 loooooooong

之前在工作中遇到一个问题，那就是使用 ajax 进行页面跳转后，没办法通过 url 再次进入，只能通过点击按钮才可以，在使用中很不方便，今天写另外一个项目时，心血来潮，想啃一啃这块骨头，最后发现肉还是很多的，好了废话不多说，开始讲具体的解决方案。

URL 通常由一下几个部分构成： 协议：// 域名/路径？参数#哈希值 

在进行请求的时候，#哈希 这部分只做本地处理，不会上传到服务器，因此，我就拿哈希进行开刀。

首先，添加一个哈希值可以使用 javascript 中的 document.location.hash="#hash"，读取的时候也是 localtion.hash，注意的是，取到的值带有 # 号，进行值的判断时需要进行特殊处理，这样，通过哈希值的方式，我们就可以构造出一个独立的 url，到这里，问题已经解决了一半了。

接下来，我们可以通过页面完成加载时触发的一个函数进行 url 中哈希的处理，通过判断哈希值，来决定是否进行 ajax 的更新，跳到指定的页面上，这里可以使用 jQuery 的 $(document).ready(function(){...}); 进行，也可以使用 js 原生的方法，看大家的喜好。

最后就是一些细节的处理了，如用户可能手动改哈希，导致页面无法跳转，这些问题解决后，就实现了想要的功能了。

PS：很多前端路由，尤其是无刷新的那种，都是这种思路进行解决的。

❂ 浪漫一夏

世界上最美妙的莫过于此，在不谙世事的年纪，对生活的全部期待就是绚烂的理想本身。 by 赫恩曼尼