javascript history.back会丢失搜索结果

时间:2012-12-06 18:22:12

标签: javascript ajax html5 browser-history

第A页:

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

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

Page A HTML:

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

Page B细节---&gt;从页面A搜索列表

中选择特定搜索结果后出现此页面
    <a href="javascript:history.back();">Back</a><br />

现在,当我回到页面A时,我可以看到我的搜索条件,因为它们被选中但结果Div已经消失了。我想要做的是我想在页面回来时保留搜索列表。 我想我在这里可以做的是在页面返回时再次调用searchbtn click事件,以便列表再次出现。任何人都可以告诉我如何只在页面从页面B返回时触发searchbtn点击事件或指向我正确的方式这样做.. 谢谢

3 个答案:

答案 0 :(得分:1)

浏览器后退按钮长期以来一直存在AJAX问题。有脚本,变通方法和技术(取决于您要使用的框架)。

由于您似乎正在使用jQuery(基于您发布的JavaScript语法),因此这是指向另一个Stackoverflow post regarding back button jQuery plugins的链接。

答案 1 :(得分:1)

history.back()将返回到最后访问的网址,这意味着在用户访问期间进行的任何ajax调用都不会自动重复。您的浏览器可能会自动恢复您的表单选择,但SearchResults()功能仅由click事件调用,不是选择事件。

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

答案 2 :(得分:0)

    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调用显示列表。在第一次请求时,我正在缓存列表并设置滑动到期,因此它不会随时回升,所以每个人都快乐地生活。