Question

您好，

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

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

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

请求建议

Answer 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历史记录API的在线资源。

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

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

1 个答案: