單擊后退按鈕時如何更改html Ajax內容？

Question

我有一個帶過濾器的搜索頁面。 當用戶更改過濾器值時，我將參數添加到 URL 以防止用戶刷新頁面時出現這些值

q       = $('#form input[name=q]').val(),
srchtype= $('#filter input[name=srchtype]:checked').val(),
sortBy  = $('#filter select#sortBy').val(),
parameters = "q="+qVal+"&srchType="+srchType+"&sortBy="+sortBy;
history.pushState(null, null, '?'+parameters);

然后我使用 Ajax 獲取數據

$.ajax({
    type: "POST",
    url: url,
    data: parameters+"&_token="+_token
}).done(data => {
    // Javascript Code
});

問題在於，當用戶點擊瀏覽器的后退按鈕時，URL 會變為上一個，但頁面上的數據不會改變。

Answer 1

我試過了，它有效：D

history.replaceState($('body').html(), null) // store the first body html

q       = $('#form input[name=q]').val(),
srchtype= $('#filter input[name=srchtype]:checked').val(),
sortBy  = $('#filter select#sortBy').val(),
parameters = "q="+qVal+"&srchType="+srchType+"&sortBy="+sortBy;

$.ajax({
    type: "POST",
    url: url,
    data: parameters
}).done(data => {
    // Javascript Code

    history.pushState($('body').html(), null, '?'+parameters); // store the next body html and url
});