如果使用AJAX內容檢測到散列更改，則更好的方式來重新加載頁面？

我正在使用AJAX內容。基本上，一大堆產品都在一個頁面上，當您點擊某個產品時，它當前會轉到該產品，而無需重新加載該頁面。產品UPC作爲散列附加。問題是，當用戶點擊後退按鈕時，它不起作用。用戶目前必須依靠麪包屑返回。如果使用AJAX內容檢測到散列更改，則更好的方式來重新加載頁面？

我的解決方案是在散列更改函數上使用一個窗口，該窗口可以工作，但顯然會強制頁面在前進時重新加載。這種打敗AJAX的目的。如果用戶通過獲取哈希值來單擊後退按鈕，而不是按照我目前使用的方式單擊後退按鈕，是否有更好的方式導航到頁面上的最後一項？

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    var fullURL = window.location.href = "http://www.test.com/product-categories/test.php" + hash; 
    if (fullURL) { 
     location.reload(); 
    } 
});

來源

2017-04-06 Tom

使用History.pushState API。通過這種方式，您可以將自己的內容保存在歷史記錄中，並且用戶可以通過來回傳輸 - https://code.tutsplus.com/tutorials/an-introduction-to-the-html5-history-api--cms-22160 –

i認爲http://sammyjs.org/會對這 – ryan

有用這些都看起來很有前途的謝謝你！ – Tom

這裏是你如何與歷史API

function loadProduct(productid, reload){ 
 
    $.ajax({ 
 
    ... 
 
    ... 
 
    data: {productId : productid}, 
 
    success:function(){ 
 
     if(!reload) { 
 
      History.pushState('productName', { productId : productid }, '#' + productId) 
 
     } 
 
    } 
 
    }) 
 
} 
 

 
$(product).on('click', function(){ 
 
    loadProduct(productId , true) 
 
}); 
 
$(window).on('popstate', function(){ 
 
    loadProduct(e.state.productId, false); 
 
});

這樣，您將存儲產品ID的產品，每次用戶點擊做到這一點。並且當他們返回&時，它將獲得存儲的產品ID並將重新加載它

來源

2017-04-06 20:17:05

謝謝！這看起來好像可以滿足我的需求。欣賞它！ – Tom

你將如何使用JSON插件？這是可能的嗎？ – Tom

是的，您可以將json數據存儲在pushState中。沒有任何瀏覽器的文檔中提到的限制，但它在這裏提到http://stackoverflow.com/a/22214096/1911146 –

如果使用AJAX內容檢測到散列更改，則更好的方式來重新加載頁面？

回答

相關問題