javascript – 如何获取以前的ajax请求

我正在编写一个包含很多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));

可以请某人根据我的代码指出我的代码片段,如何为浏览器历史记录中保存的每个请求创建一个链接,这样我就可以创建一个按钮并添加on.click goto 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","#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":
       }
    }

  };

这是一个简单的plunker,说明了调用pushstate如何更改页面的url.我没有在plunker中使用Ajax get查询,但状态由用户在搜索框中键入的文本更改.

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