如何在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; 
     } 
}