如何获得先前的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