JavaScript中的history.back会导致搜索结果丢失

Question

页面A：

$(document).ready(function () {
    bindData();
});

function bindData() {
    $('#searchbtn').bind('click', function () { SearchResult(); });
}
function SearchResult() {
 ajax call...
}

页面A的HTML：

<input type="button" id="searchbtn" />

页面B详细信息--->此页面在从A页面搜索列表中选择特定搜索结果后出现

    <a href="javascript:history.back();">Back</a><br />

现在当我回到页面A时，可以看到我的搜索条件，但结果Div已经消失。我想要做的是当页面回来时，搜索列表保持原样。我认为我可以通过某种方式再次调用searchbtn点击事件，这样列表就会出现。有人能告诉我如何仅在页面从B页面返回时触发searchbtn点击事件，或指点我正确的方法吗？ 谢谢

- Scorpio

Answer 1

浏览器的“后退”按钮在AJAX中一直存在问题。根据您想要使用的框架，有脚本、解决方法和技术可用。

既然您似乎正在使用jQuery（根据您发布的JavaScript语法），这里提供了一个链接Stackoverflow post regarding back button jQuery plugins，其中包含关于后退按钮jQuery插件的信息。

- Philip Tenn

Answer 2

history.back() 会将您返回到上次访问的 URL，这意味着用户访问期间进行的任何 ajax 调用都不会自动重复。您的浏览器可能会自动恢复您的表单选择，但 SearchResults() 函数仅由 click 事件调用，而不是选择事件。

您可以使用像 sammy.js 这样的框架将 URL 绑定到 ajax 状态。这样，history.back() 将带您转到与 SearchResults() 相关联的 URL。

- giaour

Answer 3

    function bindData() {
    var chkinput1 = $("input:checkbox[name=x]:checked").length;
    var chkinput2 = $("input:checkbox[name=y]:checked").length;

    if (chkinput1 > 0 && chkinput2 > 0) {
       SearchResult();
     }
    $('#searchbtn').bind('click', function () { SearchResult(); });
    }

我知道这不是实现此结果的最佳方式，但我认为与其使用其他插件增加复杂性，我们现在将采用这种方式。如果有人正在寻找相同的问题，请让我再次告诉您，这不是最佳实践，因为在返回历史记录时，我们根据缓存的复选框输入选择再次调用搜索结果并生成整个ajax调用以显示列表。在第一次请求时，我会缓存列表并设置滑动过期时间，因此它不需要任何时间就可以回来，所以每个人都可以快乐地生活。

- Scorpio