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

這改變我的網址就好了，並將其添加到我的url堆棧。我有另一個功能，如下所示：

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

第二個函數也會在調用時更改網址。現在，我有這部分我想弄清楚如何使用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加載就好，網址也隨之改變。當我點擊後退按鈕時，網址將回滾到上一頁的網址，但頁面內容會重新加載當前表單而不是以前的表單。當我點擊後退按鈕時，它正在做一個ajax調用（firebug），就好像它試圖加載前一個窗體，而不是運行先前的ajax調用它運行當前的ajax調用。因此，我的網址可以追溯到前一個網址，但加載的表單或調用的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); 
} 

這將減少將來對於幾乎正在工作但未正常工作的任何混淆。