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;
}

请参阅如何在使用带有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);
 }

这将减少将来几乎可以工作但不能正常工作的混乱.