使用带有 AJAX 表单的后退按钮？答案

【问题标题】：Use Back button with AJAX form?使用带有 AJAX 表单的后退按钮？
【发布时间】：2011-06-12 23:40:38
【问题描述】：

嗨，

我有一个 ASP.NET MVC 页面，其中包含 5 个级联下拉菜单（在加载之前隐藏）。设置第一个时，AJAX 将获取第二个下拉列表（动态 html）的数据。

如果我们导航到下一页然后点击浏览器中的“返回”按钮，即使我们设置了所有 5 个，也只会显示和设置第一个级联下拉菜单？

注意：通过设置正确的查询字符串，服务能够设置表单，就像使用了 Ajax 一样，但从不使用后退按钮咨询服务。

恳请建议

【问题讨论】：

标签： c# jquery asp.net-mvc 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”的在线资源。

我希望这个例子会有所帮助。

【讨论】：