使用带有 AJAX 表单的后退按钮？
Posted
技术标签:
【中文标题】使用带有 AJAX 表单的后退按钮？【英文标题】：Use Back button with AJAX form? 【发布时间】：2011-06-12 23:40:38 【问题描述】：嗨，
我有一个 ASP.NET MVC 页面，其中包含 5 个级联下拉菜单（在加载之前隐藏）。设置第一个时，AJAX 将获取第二个下拉列表（动态 html）的数据。
如果我们导航到下一页然后点击浏览器中的“返回”按钮，即使我们设置了所有 5 个，也只会显示和设置第一个级联下拉菜单？
注意：通过设置正确的查询字符串，服务能够设置表单，就像使用了 Ajax 一样，但从不使用后退按钮咨询服务。
恳请建议
【问题讨论】：
【参考方案1】：您需要的是 HTML 5 历史 API。你可以在很多地方读到这个，例如here。
这是一个简单的示例，仅 HTML（您的整个问题与 ASP.NET MVC 无关，而是与 HTML 相关，这可能发生在任何平台上）：
假设您有第 1 页（index.html）：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="txt1" />
<br />
<input type="text" id="txt2" />
<br />
<br />
<button onclick="doStuff();">do stuff</button>
<button onclick="goFurther();">go further</button>
<script type="text/javascript">
var qs = (function (a)
if (a == "") return ;
var b = ;
for (var i = 0; i < a.length; ++i)
var p = a[i].split('=', 2);
if (p.length == 1)
b[p[0]] = "";
else
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
return b;
)(window.location.search.substr(1).split('&'));
window.onload = function ()
var data1 = qs["txt1"];
var data2 = qs["txt2"];
if (data1 == undefined)
data1 = "";
if (data2 == undefined)
data2 = "";
var textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2");
textbox1.value = data1;
textbox2.value = data2;
function doStuff()
var textbox1 = document.getElementById("txt1");
var textbox2 = document.getElementById("txt2");
history.pushState('abc', 'title', 'index.html?txt1=' + textbox1.value + "&txt2=" + textbox2.value);
function goFurther()
window.location = "/next.html";
</script>
</body>
</html>
如您所见（并在项目中尝试），第一个按钮获取两个字段中的数据（在我过于简单的示例中的文本框）并将当前 URL 设置为一个带有包含此数据的查询字符串（再次，作为过于简化的示例，它不进行验证、转义、编码等）。
第二个按钮将您带到另一个页面：
<!DOCTYPE html>
<html>
<head>
<title>Next crp</title>
<meta charset="utf-8" />
</head>
<body>
asdf
</body>
</html>
放在这里只是为了能够导航到它。 导航回第一页（通过按浏览器中的后退按钮）将引导您到通过 javascript 使用查询字符串设置的 URL。
onload 处理程序将使用查询字符串中的数据重新填充元素。
不要忘记搜索有关“HTML5 History API”的在线资源。
我希望这个例子会有所帮助。
【讨论】：
以上是关于使用带有 AJAX 表单的后退按钮？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 ajax 提交带有 3 个提交按钮的表单而不重定向到 Laravel 中的表单操作 url？
如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求？