1

我试图弄清楚如何将这个 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 调用与最近的页面加载（而不是前一个页面加载）相同。

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

4

1 回答 1

8

你正在做一些奇怪的事情。

window.popState = ajax;

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

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

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

请参阅使用带有 history.pushstate 和 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);
 }

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

于 2012-03-18T17:48:09.340 回答