阿賈克斯更新的用戶界面和後退按鈕

Question

場景：

• 頁面加載上有一個複雜的UI。
• 用戶做了一些通過Ajax回調改變數據的動作，通過DOM操作（例如通過jQuery）在UI上反映更改。
• 用戶單擊一個鏈接轉到另一個頁面（如詳細信息頁面）。
• 用戶單擊後退按鈕返回原始UI頁面。
• 用戶看到過時的信息 - 看起來他所做的改變（在步驟2中）從未發生過。

你如何處理這種情況？

Answer 1

餅乾。用戶離開頁面並返回後保存信息的唯一方法是使用cookie。

更好的辦法來做到這一點是

0. user goes to your page 
1. A page is loaded with complex UI based on what is saved in the users cookies (default if no cookie) 
2. user does some actions, which are saved into the cookie 
3. user goes to another page 

Answer 2

無論數據被傳遞到下一個頁面需要也可以傳回UI改變它需要的方式。

這可以用cookies來完成，或者可以使用post數據/服務器端邏輯完成。只需將值傳遞到第二頁，並且當用戶想要返回時，也一定要將它們傳回，並根據值更改接口。你甚至可以使用這個會議，這是你想要的，但我認爲這可能是矯枉過正，如果這是你唯一需要它的地方。

都市報

Answer 3

您可以強制頁面時，後退按鈕被按下，然後將其從服務器獲取更新的數據刷新。

<META http-equiv="Cache-Control" content="no-cache"> 
<META http-equiv="Pragma" content="no-cache"> 
<META http-equiv="Expires" content="-1"> 

，你可能也想看看Real Simple History，看看你是否可以利用自己的技術優勢，利用後退按鈕。

Answer 4

餅乾不是唯一的方法。想想jQuery BBQ插件。請參閱http://mattfrear.com/2010/03/20/enabling-browser-back-button-on-cascading-dropdowns-with-jquery-bbq-plugin/

基本上，它使用#variables添加到查詢字符串來欺騙瀏覽器，使其認爲它是一個新頁面，因此如果要刷新頁面或返回頁面，＃變量將重新填充控件。