HTML5 History API：“返回”到另一个页面时显示 JSON，然后再次“转发”答案

【问题标题】：HTML5 History API: JSON displayed when going "back" to another page, and then "forward" againHTML5 History API：“返回”到另一个页面时显示 JSON，然后再次“转发”
【发布时间】：2013-04-12 21:12:22
【问题描述】：

我有一个页面，其中有几个搜索/过滤按钮，单击这些按钮时，通过 AJAX 刷新下面列表的内容。

在此过程中，我正在修改历史记录（通过 pushstate），以便新过滤的页面可以添加书签，因此后退按钮可以使用。我也在监听 popstate 事件，对 Back 做出反应。

我的代码或多或少是这样的：

window.addEventListener("popstate", function(ev) {
  if (!window.history_ready) { return; } // Avoid the one time it runs on load 
  refreshFilter(window.location.href, true);
});

refreshFilter: function(newURL, backButtonPressed){
  $.ajax({ url: newURL}).done( blah );

  if (!backButtonPressed) {
    window.history_ready = true;
    history.pushState(null, null, newURL);
  }
}

这很好用，除了一个奇怪的情况......

用户在页面“A”中
他们点击一个链接进入这个播放历史的页面（我们称之为“B”）
他们运行了几个过滤器，然后按了几次 Back，所以他们回到了“B”的初始状态
他们再次单击“返回”，将他们送回“A”
此时，如果他们按下 Forward，浏览器不会再次向服务器请求页面“B”，而是简单地显示一堆 JSON 代码作为页面内容（这个 JSOn 是我的一个响应AJAX 请求过滤内容）

至少在最新的 Chrome 中

为什么会发生这种情况，我该如何避免？

【问题讨论】：

标签： html back-button browser-history html5-history

【解决方案1】：

Chrome 会缓存您访问的页面，当您返回或前进时，它会使用缓存快速显示页面。如果您用于通过 AJAX 从服务器检索 JSON 的 URL 与 Chrome 会命中的 URL 相同，那么 Chrome 可能会从缓存中选择该页面，而不是漂亮的 HTML，它只是一个 JSON 转储。

【讨论】：

我尝试了隐含的解决方案——稍微改变了 AJAX 获取的 URL（通过在查询字符串中添加一个完全忽略的 &ajax=1）——它成功了！ :)
值得注意的是，在尝试此解决方案时，您可能需要清除 Chrome 缓存。尝试此操作后，Chrome 似乎仍然无法正常工作，因为它缓存了旧结果。
@jonnybot 谢谢，我认为修复程序对其他人有用，但对我来说，但在清除缓存后它开始工作并且错误消失了。

【解决方案2】：

$.ajax 有一个缓存选项：

$.ajax({ cache: false, url: newURL})

见http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案3】：

@pupeno 是对的，但要给出更面向解决方案的答案，您需要在服务器拥有的路由中区分 JSON 和 HTML。

我知道这样做的两种方法：
1) 如果你调用 /users 你会得到 HTML，如果你调用 /users.json 你会得到 JSON。
2）如果你调用/users，你会得到HTML，如果你调用/api/users，你会得到JSON。

我更喜欢 1，但它取决于 Web 框架是默认使用还是您自己配置。
1 用于 Ruby on Rails，2 也用于其他框架。

【讨论】：