Question

我有一个页面，其中有几个搜索/过滤按钮，点击后，通过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);
  }
}

除了一个奇怪的案例外，这种方式非常有效......

用户在页面＆＃34; A＆＃34;
他们点击了一个链接转到这个播放历史的页面（让我们称之为＆＃34; B＆＃34;）
他们运行了几个过滤器，然后按回几次，这样他们就回到了初始状态＆＃34; B＆＃34;
他们再次点击“返回”，然后将其发送回＆＃34; A＆＃34;
此时，如果他们按下Forward，而不是再次向服务器请求Page＆＃34; B＆＃34;，浏览器只显示一堆JSON代码作为页面内容（此JSOn是我的一个AJAX请求的响应来过滤东西）

至少在最新的Chrome中

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

Answer 1

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

Answer 2

$.ajax有一个缓存选项：

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

请参阅http://api.jquery.com/jquery.ajax/

Answer 3

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

我知道这样做的两种方法：
1）如果调用/users，则获取HTML；如果调用/users.json，则将获取JSON。
2）如果调用/users，则获取HTML；如果调用/api/users，则将获取JSON。

我更喜欢1，但是如果默认使用哪种，或者您自行配置，则取决于Web框架。
1在Ruby on Rails中使用，2在其他框架中也使用。

HTML5历史记录API：当“返回”到另一个页面时显示JSON，然后再次“转发”

3 个答案: