使用GET方法通过AJAX成功提交表单后更改URL

Question

我需要在使用AJAX GET请求提交表单后更改当前URL。

我尝试使用history.pushState(null, null, url+'?'+form.serialize())，它运行正常。问题是我正在检索的只是页面的一个子集，因此在浏览历史记录时，浏览器将显示该子集而不是整个页面。

我喜欢history.pushState方法，但看起来并不可行;你知道更好的方法吗？或者，更好的是，您知道如何保存页面的整个内容而不是子集吗？

我需要获取的网址是mydomain.com/some-page?variable=1&varialbe_2=2

为了提供更多信息：我需要访问的控制器方法检测路由是否已被Ajax请求调用，如果它有响应将是json。否则它将正常加载整个页面。

感谢您提供任何帮助。

Answer 1

如果您只想更改当前页面，以下内容将起到作用：

window.location.href = url+'?'+form.serialize()

如果您想要保留页面状态，您还可以使用localstorage或sessionstorage来保存数据，然后在页面打开时检查并加载它。共享起来并不容易（URL中的查询字符串很容易复制和粘贴），但可以让你保留更多的数据。

如果您尝试仅在页面上重新加载一个元素，那么推送状态正是您所寻找的，您只需要响应用户向后导航。

From another SO Answer：

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

这将允许您执行代码以获取URL的内容并手动更新您的UI以反映以前保留的数据。