啓用後退按鈕以充當Ajax應用程序中的「撤消」按鈕

Question

我嘗試使用瀏覽器的後退和前進按鈕來處理Ajax應用程序時遇到問題。我使用jQuery History插件來啓用瀏覽器歷史記錄。

該應用程序包含一頁商品。有一個排序欄，使用戶能夠通過各種值對產品進行排序。用戶可以選擇產品服裝類別（裙子，上衣，下襬，裙子等），子類別部門（裙子：迷你，馬克西，高腰，波西米亞/嬉皮等），尺寸（XS SML XL XXL XXXL），顏色（白色，黑色，灰色，藍色，紅色等）以及時代和材料。

大多數選項通過使用Ajax將最新選定的選項加載到適當的DIV中啓用。

因此，舉例來說，選擇顏色黑色，下面的代碼會被執行

$('#colorSort').load('colorSort.php?color=Black'); 

然後，如果用戶選擇布朗：

$('#colorSort').load('colorSort.php?color=Brown'); 

然後，如果用戶去選擇黑色：

$('#colorSort').load('colorSort.php?colorRemove=Black'); 

這工作正常，只要我們不需要支持後退/前進按鈕，但wh通過jQuery歷史記錄添加後退按鈕功能，我們遇到了問題。例如：使用我們之前的例子，用戶選擇了黑色和棕色的顏色。現在讓我們說，用戶點擊後退按鈕。用戶會希望被刪除其棕色的顏色選擇，但事實並非如此，因爲被加載的網址是：

colorSort.php?color=Black, 

，而不是

colorSort.php?colorRemove=Brown 

這就是它需要。

我試着通過在查詢字符串中附加一組'undo'參數來解決這個問題。例如，

colorSort.php?color=Brown//colorRemove=Brown 

包含雙斜線之前的當前查詢字符串和斜線之後的「後」查詢字符串。所以使用這段代碼，如果我知道一個新的鏈接被點擊了，我可以加載當前查詢字符串（在斜線之前），並且如果我知道後退按鈕已被點擊，我可以加載斜線後面的「後退」查詢字符串。

但問題是，似乎沒有任何方法檢測後退/前進按鈕是否被點擊。 jQuery歷史記錄在hashchange事件下運行，並且該事件沒有區別（據我所知），以什麼事件觸發它。

這是我的問題。如果StackOverflow.com的超級聰明人能夠幫助我找到解決方案，我將非常感激。謝謝！

Answer 1

結帳jquery bbq（後退按鈕&查詢）。它允許你通過使用瀏覽器的標準歷史實現來存儲狀態來實現你想要的。然後它使用hashChange事件（如果支持並且有些時候不欺騙）在感興趣的事情發生時觸發動作（即，點擊一個鏈接或點擊後退按鈕）

這樣你可以點擊一個鏈接，它會在你的頁面上添加一個新的散列參數，你可以獲取任何參數並相應地加載數據。當你回擊時，它會獲得param的前一個值，並且像以前一樣加載，在可能的情況下進行緩存。這是一種簡單的，不完全正確的解釋，但足夠接近簡要的概述。

Answer 2

添加隱藏字段以存儲顏色值。 第一次當您更改顏色時，將值添加到隱藏的表單字段中。

檢查，每次

改變顏色，如果你按後退按鈕和狀態回來

如果隱藏字段都值使顏色是什麼在隱藏字段

在這種情況下，棕色

否則如果隱藏字段爲空默認顏色爲黑色。

我希望這會起作用。

由於頁面未提交會話無法使用。