Question

我正在试图找出历史API，但在阅读完文档之后我几乎什么都不懂。

例如，我有以下AJAX：

$("#hund").click(function(e) {
         e.preventDefault();
$(".result").load("hund.html #content", function() {
  });

以下浏览器URL操作：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

我明白了。点击一下，更改网址。点击返回，更改网址。

但是我想，如果在AJAX点击后单击后退按钮，我想要反转AJAX调用。在这种情况下，这将是结果div再次被emtpy，或者如果你点击了几个东西，然后点击回来，之前的东西要加载。

我将如何实现这种效果？

Answer 1

您需要手动修改浏览器历史记录。有这个库。

请参阅What's the best library to do a URL hash/history in JQuery?

Answer 2

保留上一页的内容。例如：

var lastPage = $('.result').children().remove();
$('.result').load(...);

然后，当你想回去时，做这样的事情：

$('.result').empty().append(lastPage);

这至少是基本原则。在实践中，如果您希望某人能够多次返回，那么您不能只有一个lastPage;你需要做一些更复杂的事情。

另一种更复杂的方法是使对象保留所有先前访问过的页面（cache）的内容。然后你可能有一个如下所示的函数navigate：

var cache = {};
var currentPageName = /* something */;
function navigate(newPageName) {
    cache[currentPageName] = $('.result').children().remove();
    if(Object.prototype.hasOwnProperty.call(cache, newPageName)) {
        $('.result').append(cache[newPageName]);
        delete cache[newPageName];
    }else{
        $('.result').load(newPageName + ' #content');
    }
    currentPageName = newPageName;
    history.pushState(newPageName, newPageName, newPageName);
}

然后在onpopstate中，您也可以使用navigate。

如何在后退按钮单击时撤消AJAX操作？

2 个答案: