阿賈克斯加載歷史「onpopsate」

Question

一整頁我用它來創建一個新的狀態：

//state 1 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=1'); 
//state2 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=2'); 
//state3 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=3'); 

我想重新加載內容時，用戶按下後退按鈕。

window.onpopstate = function(event) { 
      if (event.state !== null && event.state.reload) { 

       location.reload(true); 

      }    
    }; 

但是，這樣我就會失去狀態。這就像點擊一個完整的新網址。它不保留序列。有沒有另一種方式來加載整個頁面，但以Ajax方式？

Answer 1

您需要運行ajax調用，而不是在popstate事件上重新加載頁面。

window.onpopstate = function(event) { 
    if (event.state !== null && event.state.reload) { 
       $.ajax({ 
       url: 'load-content.php', 
       success: function(response) { 
        $('#main-content').replaceWith(response);  
        } 
       }); 
    }    
}; 

在目標PHP文件中根據url或給定參數加載內容，並在成功時用生成的內容替換內容。