页面刷新后重新加载ajax检索数据答案

【问题标题】：Reloading ajax retrieved data after page refresh页面刷新后重新加载ajax检索数据
【发布时间】：2012-08-14 01:34:39
【问题描述】：

所以，我有一个页面，其中有几个带有 onClick 事件的链接，这些链接将从外部文件中检索数据并用这些数据填充一个 div。这按预期工作。但是，当我刷新页面时，div 再次清空。我想要发生的是，在刷新后，div 将保持最后检索到的内容。

我不想走 cookie 的道路，并考虑将数据添加到 URL，我认为这是我想要的方式。

是否有一些不错的 JQuery 调用可以在单击链接时将数据附加到 url，然后在刷新时将所需内容恢复到 div？

我的 loadContent 函数是：

function loadContent (url, container) {
    var target = $(container);
    target.load(url, function (text, statusText) {
        if (statusText === "success") {
            target.find("a[rel^='gridnav']").initgn();
        }   
    });
}

编辑：我忘了提，那行

target.find("a[rel^='gridnav']").initgn();

用于在加载的新内容上重新初始化脚本。

所以当我点击一个链接时，onClick 事件会像这样调用函数

<a href="#" onClick="loadContent('xyz.html', '#right')">TEST</a></li>

其中 xyz.html 仅包含 div "#right" 中我想要的数据

有没有办法编辑这个函数来做我想做的事？

【问题讨论】：

查看stackoverflow.com/a/3354511/65387 在 URL 中获得所需信息后，只需处理页面加载以进行检查即可。

标签： javascript jquery ajax url refresh

【解决方案1】：

您可以通过使用将数据附加到 url

window.location.hash

https://developer.mozilla.org/en-US/docs/DOM/window.location

如果你在 jQuery 插件中搜索 QueryString，应该有几十个插件可以简化这个任务。

【讨论】：

如果我没记错的话，你只能在 JS 中获取哈希后的值。这意味着您无法在服务器端预取数据并将其与 OP 想要的初始页面加载一起发送。这只会让您再次使用 ajax 获取它。
OP 没有提到任何关于服务器端处理的内容。
除此之外，实际上您可以在服务器端获取哈希后的值。例如，在 .Net 中，您只需修改表单操作以包含任何更新的哈希值。
@Schmiddty：他写道“刷新后，div 将保持最后检索到的内容”。我认为这意味着无需通过 ajax 再次获取它。修改表单动作？如果他实际上是在提交表单，那可能会起作用，我认为他的意思是按 F5。
如果他的意思是“按F5”，服务器就不可能知道加载了什么内容，对吗？因此，重新加载后在无服务器页面上保持任何类型状态的唯一方法是以某种方式修改 URL，无论是通过查询字符串参数还是哈希值。

【解决方案2】：

我会使用本地存储。它就像 cookie，但更容易维护。唯一的缺点是并非所有旧版浏览器都支持它（有关浏览器支持，请参阅http://caniuse.com/#search=localStorage）。有关该功能的或视图，请参阅https://developer.mozilla.org/en-US/docs/DOM/Storage 如果您想完全不使用类似 cookie 的功能；那么据我所知，它必须在服务器端完成

【讨论】：

【解决方案3】：

没有 cookie，您的任务会稍微困难一些。但我可能有两个解决方案给你：

使用服务器上的session，可以控制调用了哪个ajax，下次加载主页面时，可以追加新的内容。
使用url hash附加ajax锚点已经被点击#anchorname所以你可以在重新加载后点击它。

【讨论】：

【解决方案4】：

评论告诉您如何在不加载页面的情况下修改 url。你可以用那个。如果您必须使用旧版浏览器，那么您仍然可以使用片段（或同时使用这两种操作）。

有一些用于 jQuery/JavaScript 的历史插件来管理这个 .. 这是一种称为“深度链接”的技术。你也许能找到一些简单的东西。基本上，当 loadContent 运行时，您可能希望将 url 从 /whatever 更新为 /whatever#right，并使用指示加载内容 ID 或类似内容的片段。

另一种选择是在页面最初加载时加载到该 div 的服务器上设置一些标志，这也可以为您节省 ajax 请求。不过，这取决于您的服务器代码的设置方式，这可能对您不起作用。

【讨论】：