HTML 5 - Ajax popstate 和 pushstate

Question

我正在尝试弄清楚如何将这个 pushstate 和 popstate 用于我的 ajax 应用程序。我知道有一些插件，但我目前正在尝试学习如何以原始形式使用它。我也知道 IE 不支持原始形式。除此之外，我需要一些帮助来理解如何使用它。

它的 pushstate 部分非常简单。现在我有：

function loadForm(var1,var2){ 
    string = "xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

这会很好地更改我的网址并将其添加到我的网址堆栈中。我还有另一个函数，如下所示：

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

第二个函数在调用时也会改变 url。现在我有了那部分，我正试图弄清楚如何使用 popstate。现在我有它如下

window.popState = ajax;

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: string,
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

因此，如果您可以使用两个链接对我的页面进行映像，则一个调用 loadForm 函数，另一个链接调用 loadForm2 函数。当我单击每个链接时，表单通过 ajax 加载就好了，并且 url 会发生应有的变化。当我点击后退按钮时，网址将回滚到上一页的网址，但页面内容再次加载当前表单而不是之前的表单。当我点击后退按钮时，它正在进行 ajax 调用（firebug），就好像它正在尝试加载以前的表单一样，但不是运行以前的 ajax 调用，而是运行当前的 ajax 调用。所以我的 url 会回到上一个 url，但是加载的表单或调用的 ajax 调用与最近的页面加载（而不是前一个页面加载）相同。

我不确定我做错了什么，任何帮助将不胜感激。

Answer 1

你在做一些奇怪的事情。

window.popState = ajax;

我什至对ajax() 甚至被调用感到惊讶。

通常的做法是注册一个事件处理程序。

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
}

见How to trigger change when using the back button with history.pushstate and popstate?

编辑：

基本上你需要知道当你的状态改变时要加载哪个表单。 .originalEvent.state 将包含此信息，然后您可以将其传递给您的 ajax 调用。它还应该包含相应的string。

您的方法中的问题是string 始终是最后一个新加载的页面之一。您需要在event.orginalEvent.state 中读取该字符串。使用console.log() 在该对象中找到它。

编辑 2：

你有没有办法给我一个例子来说明我的代码应该是什么样子。我想你明白我想要完成什么。

每次点击浏览器的后退按钮（或前进按钮）时，都需要从 AJAX 加载页面。

你曾试图这样做：

window.popState = ajax;

这很危险，因为您要替换系统功能。

相反，您应该为状态更改注册一个事件处理程序。

jQuery(window).bind('popstate', ajax);

现在每次按下后退按钮时，您的 ajax() 函数（应该）都会被调用。

到目前为止，这只会改进您的方法，但不能解决您的问题。

问题是您原来的ajax() 函数引用了一个名为string 的全局变量。这个全局变量没有先前状态的记忆。因此，每次原始表单都会一次又一次地加载。

但是您已经通过以下方式正确地将string 存储在状态中：

history.pushState("", "page 1", string);

所以当ajax被调用时，浏览器会给它一个事件对象，里面包含了所有这些信息。

所以你现在需要做的就是改变你的ajax()如下：

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

最后，您还应该停止使用string 作为全局变量，使用var 关键字并确保字符串包含“？”：

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

这将减少将来对几乎可以正常工作但无法正常工作的任何混淆。