如何獲得先前的ajax請求

Question

我正在處理一個包含很多ajax請求的腳本。 腳本工作正常，我有很多動態內容，這些內容根據用戶的選擇或搜索輸入而變化。

我已經開始尋找如何操縱瀏覽器歷史記錄並將這些請求保存在瀏覽器歷史記錄中的方法。 我經歷了MDN - Manipulating the browser history 。 我已經了解了本文的總體思路，但是在我的項目中實現它有點困難。

這是實時搜索部分的代碼：

$('#search').keyup(Foundation.utils.throttle(function(e) {
    var searchField = $('#search').val();
    var regex = /[\D]+/;

    $('.loader').show();

    if (regex.exec(searchField)) {
      $.get("getEventsWithVideos.php?text=" + searchField, function(data) {
    });

    $.get("getClubsWithVideos.php?text=" + searchField, function(data) {
    });

    } else {

      // If searchField is a number
      $.get("getMembersWithVideos.php?text=" + searchField, function(data) {
        $events.empty();
        $clubs.empty();
        $members.empty();
        $membersdeep.empty();
        $members.append("<h4>Members</h4>");
        var vals = jQuery.parseJSON(data);

        $.get("getVideosDyn.php?membershipno=" + vals['Member']['membership_no'], function(data) {
        }); 

  });

}

}, 400));

可以請某人根據我的代碼向我介紹代碼段，如何為要保存在瀏覽器歷史記錄中的每個請求創建鏈接，以便創建按鈕並添加。單擊goto 1 request back。

先感謝您

Answer 1

我正在提出使用內部頁面鏈接的解決方案。 當用戶在瀏覽器中前進或后退或觸發back（）事件時，將必須綁定到“ onpopstate”事件，並使用狀態對象將窗口置於正確的狀態。

$('#search').keyup(Foundation.utils.throttle(function(e) {
    var searchField = $('#search').val();
    var regex = /[\D]+/;

    $('.loader').show();

    if (regex.exec(searchField)) {
      $.get("getEventsWithVideos.php?text=" + searchField, function(data) {
         //I assume more code goes here and you also want set this as a history entry
         //add any parameters you need here to build this state when someone navigates to this                page
         var stateObj = { type: "getEventsWithVideos", parameter: searchField };

        //the third parameter is what will display in the browser, when you are on this state
         window.history.pushState(stateObj, "get events with videos", "#eventsWithVideos" + searchField);      
    });

    $.get("getClubsWithVideos.php?text=" + searchField, function(data) {
         var stateObj = { type: "getClubsWithVideos", parameter: searchField };             
         window.history.pushState(stateObj, "get clubs with videos", "#clubsWithVideos" + searchField);  
    });

    } else {

      // If searchField is a number
      $.get("getMembersWithVideos.php?text=" + searchField, function(data) {
        $events.empty();
        $clubs.empty();
        $members.empty();
        $membersdeep.empty();
        $members.append("<h4>Members</h4>");
        var vals = jQuery.parseJSON(data);

         var stateObj = { type: "getMembersWithVideos", parameter: searchField };             
         window.history.pushState(stateObj, "get clubs with videos", "#membersWithVideos" + searchField)

        $.get("getVideosDyn.php?membershipno=" + vals['Member']['membership_no'], function(data) {

        }); 

  });

}

}, 400));

您還需要處理onpopstate事件以重做ajax調用，並在用戶后退或前進時將頁面置於正確的狀態

window.onpopstate = function(e){
   if (e.state && e.state.type) {
      switch (e.state.type)
       {
         case "getEventsWithVideos": {//do ajax call for the first one here, to get the page state correct
               $.get("getEventsWithVideos.php?text=" + searchField, function(data) {});
           break;
          }
         case "getClubsWithVideo": //do ajax call for the second one here etc
         case "getMembersWithVideos":
       }
    }

  };

這是一個簡單的例子，說明了如何調用pushstate更改頁面的url。 我不是在插件中使用Ajax獲取查詢，而是通過用戶在搜索框中鍵入的文本來更改狀態。

http://plnkr.co/edit/HJTrW9GyKFduarl75IAd?p=preview