AjaxアプリAPI呼び出しでHTML5履歴を使用するにはどうすればよいですか？

Question

私は作成した埋め込み可能なJavScriptウィジェットを、私が作ったWordPressプラグインと話しました。基本的に、このウィジェットはいくつかのカスタムWP APIエンドポイントを呼び出し、JSONを取得してからカテゴリの商品のフィードを作成します。カテゴリをクリックするたびに、新しいAPI呼び出しを使用して新しいデータを取得します。

これはすべて動作しますが、私はブラウザのボタン操作をする方法を理解しようとしています。

これは簡単なハッシュバングなどであれば気にしませんが、ブックマークできるかGoogleクロール可能である必要はありません。

チュートリアル私はちょうど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; 
     } 
}); 

で作業っぽいそれを手に入れました。これは、ハッシュ経由で処理されていないため、最初はajaxコールを介してdoc readyにロードされているからですか？

Answer 1

手順1：switch文の代わりにwindow.location.hash = "#categories-" + id;を追加します。

/*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：ハッシュ（すなわち＃カテゴリ-1）の任意の時間を起動しますonhashchangeハンドラを追加URLの変更：

$(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; 
     } 
}