如何在Ajax應用程序API調用中使用HTML5歷史記錄？

Question

我有一個可嵌入的JavScript小部件，我已經與我所做的WordPress插件進行了談判。基本上這個小部件會調出一些自定義的WP API端點，然後獲取JSON，然後構建一個類別爲產品的提要。每次點擊類別後，都會通過新的API調用來獲取新數據。

這一切工作，耶，但我有一段時間試圖找出如何使瀏覽器後退按鈕的工作。

請注意，我不在乎它是否可以是一個簡單的hashbang或別的什麼，這不需要是書籤或谷歌可抓取。

教程我發現只是說pushState是一個對象，但什麼？

我的點擊處理程序是這樣的，

$('#sqsl_products').on('click', '.ssla-embed-link', function(e) { 
    e.preventDefault(); 
     var link = $(this), 
      linkType = link.attr('data-link_type'), 
      linkId = link.attr('data-link_id'); 

      switch(linkType) { 
       case 'categories': 
        getCategories(linkId); 
        break; 
       case 'products': 
        getProducts(linkId); 
        break; 
       case 'product': 
        getProduct(linkId); 
        break; 
      } 

}); 

每個案件進入不同的Ajax調用，即獲取數據並輸出，例如：

function getCategories(id) { 
    $.ajax({ 
     method: 'GET', 
     url: apiUrl + '/categories', 
     beforeSend: function() { 
      $(domTag).prepend('<div class="ssla-loading-top"></div>'); 
     }, 
     dataType: 'json', 
     data: { categories: id }, 
    }) 
    .done(function(response) { 
     var catList = '<ul>'; 
     var brand = response.brand; 
     $.each(response.data, function() { 
      catList += '<li><a data-link_type=' + this.type + ' data-link_id=' + this.id + ' class="ssla-embed-link" href="#' + this.id + '"><img src="'+this.image+'"/>' + this.name + '</a></li>'; 
     }); 
     catList += '</ul>'; 
     $(domTag).removeClass().addClass('ssla-' + brand + ' ssla-categories').html(catList); 
    }) 
    .fail(function(jqXHR) { 
     var json = $.parseJSON(jqXHR.responseText); 
     $(domTag).removeClass().addClass('ssla-error').html(json.message); 
     console.log(jqXHR); 
    }); 
} 

現在會pushState的發生在.done()鏈，如果有的話，那裏添加了什麼？

任何提示非常感謝，謝謝！

更新

得到它的工作上下的這個

$(window).on('hashchange', function(e) { 

    var hash = document.URL.substr(document.URL.indexOf('#')+1); 
    var split = hash.split('-'); 
    if (split.length < 2) { 
     return; 
    } 
    var linkType = split[0]; 
    var linkId = split[1]; 

    console.log(linkType); 
    console.log(linkId); 

     switch(linkType) { 
      case 'categories': 
       getCategories(linkId); 
       break; 
      case 'products': 
       getProducts(linkId); 
       break; 
      case 'product': 
       getProduct(linkId); 
       break; 
     } 
}); 

然而回到 「第一」 頁面時失敗。這是因爲它不是通過散列來處理的，並且最初是通過doc文檔中的ajax調用加載的？

Answer 1

步驟1：添加window.location.hash = "#categories-" + id;而不是switch語句。

/*switch (linkType) { 
    case 'categories': 
     getCategories(linkId); 
     break; 
    case 'products': 
     getProducts(linkId); 
     break; 
    case 'product': 
     getProduct(linkId); 
     break; 
}*/ 
//Replace the switch function. This will update the url to something like #categories-1 which will fire the event below 
window.location.hash = '#' + linkType + '-' + linkId; 
//Optionally, you can just set the href of the URL's to #categories-1 instead of using this function at all. 

步驟2：添加一個onhashchange處理程序，這將觸發任何時間的散列（即，＃類別-1）的變化中的網址：

$(window).on('hashchange', function(e) { 
     let split = window.location.split('-'); 
     if (split.length < 2) 
     return; 

     var linkType = split[0]; 
     var linkId = split[1]; 

     switch(linkType) { 
      case 'categories': 
       getCategories(linkId); 
       break; 
      case 'products': 
       getProducts(linkId); 
       break; 
      case 'product': 
       getProduct(linkId); 
       break; 
     } 
}