记住点击后退按钮时 ajax 添加的数据

2024-02-08

我有一个搜索页面,其中每个搜索结果都使用 AJAX 添加到页面中。这样我可以让用户搜索例如齐柏林飞艇,然后再次搜索金属乐队但将其添加到与先前搜索相同的结果列表中。

我的问题是,当用户单击记录的链接,然后单击后退按钮,返回到搜索结果时。
火狐 (7)使页面保持我离开时的样子,显示完整的结果。
IE (7,8) and 镀铬 (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);
    });
});  

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

SOLVED
更改为document.location.hash = "latest search"没有改变任何东西。我不得不使用localStorage正如阿米尔指出的那样。

这涉及到 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);
    }
});

你有几个选择。

  1. Use 本地存储 https://developer.mozilla.org/en/DOM/Storage记住最后一个查询
  2. 使用cookie(但不要)
  3. 使用您尝试过的哈希值document.location.hash = "last search"更新网址。您将再次查看哈希值,如果已设置,则执行另一个 ajax 来填充数据。如果你已经完成了本地存储,那么你可以只缓存最后一个ajax请求。

我会选择本地存储和哈希解决方案,因为这就是某些网站所做的。您还可以复制并粘贴 URL,它只会加载相同的查询。这非常好,我想说非常方便。

我很想知道为什么它不起作用。更新您的答案,以便我们提供帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

记住点击后退按钮时 ajax 添加的数据 的相关文章

  • ajax4jsf死了吗?还有哪些其他适用于 JSF 的 AJAX 库?

    我目前正在使用JBoss RichFaces http www jboss org jbossrichfaces 我正在从事的项目的 JSF 组件库 一般来说 它工作得很好 特别是 ajax4jsf A4J 提供的 AJAX 支持 但我发现
  • 回发后刷新时提示确认表单重新提交。我做错了什么?

    我有一个以空白 默认状态启动的仪表板 我让用户能够将保存的状态加载到仪表板中 当他们单击 应用 按钮时 我运行以下代码 function CloseAndSave var radUpload find radUpload1ID var in
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • Jquery 点击处理程序两次后不工作

    我面临一个有点奇怪的问题 我正在使用 bing 翻译器 http www bing com widget translator http www bing com widget translator 并尝试使用他们的 API 自行定制它 这
  • 在剑道组合框中动态添加项目

    如果你们中有人使用过 kendo ui 请告诉我如何在 kendo 组合框中动态添加新项目 我尝试在谷歌和其他地方搜索 我的结论是剑道中没有这样的功能 以供参考 JSBIN http jsbin com ebutaw 2 edit sour
  • jQuery - 如何检查元素是否存在?

    我知道你可以测试width or height 但是如果元素的 display 属性设置为 none 该怎么办 还有什么其他值可以检查以确保该元素存在 您可以使用length http api jquery com length 查看您的选
  • jQuery 更改事件未在输入元素上触发

    首先 我检查了与我的问题类似的每个主题 不幸的是 我还没有找到答案 我尝试结合一些答案 但没有成功 注 刚开始学习jQuery 所以这是我的问题 我创建了一个带有四个文本输入和一个按钮的表单 每个输入内部都有一个 svg 图标和一个占位符文
  • 选择移动 Web HTML5 框架 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 用于动态字符计数的 Jasmine 单元测试用例

    任何人都可以给我编写测试用例的例子来检查是否 jquery 和 jasmine 中调用 keyup 事件中的函数 我对 jquery 和 jasmine 相当陌生 所以对这些错误感到抱歉 当用户在输入字段中输入字符时 该程序显示剩余的字符数
  • 如何使用 ajax 调用(即 Select2)填充 WTForms SelectField?

    我正在尝试使用 Flask WTForms Select2 ajax 调用 实现一个网络应用程序 但不幸的是没有取得巨大成功 主要问题与我的 WTForms 类之一中的属性 choices 有关 因为我无法理解如何使用 ajax 调用填充选
  • 如何用按钮打开所有infoWIndows

    现在我想添加打开所有引脚弹出窗口的按钮 infoWindows 所以我添加功能openAllInfoWindows并添加infoWindows i open 命令 但是不起作用 HTML 代码 a href Close a a href O
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • 简单的 jQuery 帖子无法在 Internet Explorer 9 上运行(访问被拒绝)

    我使用 JQuery 和 PHP 编写了一个验证器 该验证器适用于除 Internet Explorer 9 之外的所有浏览器 我收到错误消息 SCRIPT5 访问被拒绝 jQuery 代码 contact send click funct
  • 使用 jquery 和 php 测试表单输入是否为 1 或 2 位整数

    我有一个表单 其中有五个字段全部设置为 maxlength 2 基本上 我希望唯一可以输入的值是一位或两位整数 因为在将值存储在数据库中之前对这些字段执行计算 是否有任何 jquery 不允许用户输入不是整数的值 另外 用 jquery 和
  • 如何在 angularjs 中修剪()字符串?

    有角度特定的方法吗 如果没有 我应该使用内置的jquery 来做到这一点吗 如果我应该使用内置的jquery 如何在不使用 的情况下访问trim 函数 或者这是必要的 编辑 是的 我知道 str trim 对不起 我需要这个才能在 IE 8
  • 使用 jQuery Tablesorter 操作后如何恢复当前页面?

    我正在使用 tablesorter 但无法找到有关插件 tablesorter 寻呼机的任何文档 问题是我有一个显示一些数据的表 并且在每一行中都有一个删除链接 该链接附加了要删除的元素的唯一标识符 显然 是否可以保存我正在删除的页面 然后
  • 如何清除隐藏上的引导模式

    如何在关闭 隐藏 关闭时清除引导模式 我有以下模态定义
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c

随机推荐