jquery – 记得ajax在点击返回按钮时添加的数据

前端之家收集整理的这篇文章主要介绍了jquery – 记得ajax在点击返回按钮时添加的数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个搜索页面,其中每个搜索结果添加到具有AJAX的页面。这样我可以让用户搜索例如Led Zeppelin,然后做另一个搜索Metallica,但添加到与以前的搜索相同的结果列表。

我的问题是当用户点击记录的链接,然后点击返回按钮,回到搜索结果
FireFox(7)保持页面看起来当我离开它,显示完整的结果。
另一方面,IE(7,8)和Chrome(15)会在添加任何使用AJAX的搜索结果之前显示页面,因为它不记得我向其中添加了数据。

下面是我使用的代码。我试图添加location.hash =“test”;但它似乎没有工作。

// Add search result
$("#searchForm").submit(function (event) {
    //location.hash = "test";
    event.preventDefault();

    $.post($(this).attr('action'),$(this).serialize(),function (data) {
        $("tbody").append(data);
    });
});

我不需要一个后退按钮跟踪搜索页面上的更改,例如在添加时逐步浏览每个不同的搜索结果。我只是想让浏览器记住最后的搜索结果,当我点击返回按钮。

解决
更改为document.location.hash =“最新搜索”没有更改任何内容。我不得不使用localStorage作为Amir指出。

这进入jQuery代码的其余部分:

// Replace the search result table on load.
if (('localStorage' in window) && window['localStorage'] !== null) {
    if ('myTable' in localStorage && window.location.hash) {
        $("#myTable").html(localStorage.getItem('myTable'));
    }
}

// Save the search result table when leaving the page.
$(window).unload(function () {
    if (('localStorage' in window) && window['localStorage'] !== null) {
        var form = $("#myTable").html();
        localStorage.setItem('myTable',form);
    }
});

解决方法

你有几个选项。

>使用localstorage记住最后一个查询
>使用cookie(但不要)
>使用哈希作为您尝试与document.location.hash =“最后搜索”更新的网址。你将再次查看哈希,如果它被设置,然后做另一个ajax来填充数据。如果你做了localstorage,那么你可以缓存最后一个ajax请求。

我会去与localstorage和哈希解决方案,因为这是一些网站做的。您也可以复制并粘贴网址,它只会加载相同的查询。这是相当不错,我会说很方便。

我很好奇知道为什么它不工作。更新您的答案,以便我们可以帮助。

原文链接:https://www.f2er.com/jquery/185205.html

猜你在找的jQuery相关文章