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));

可以请某人根据我的代码指出我的代码片段，如何为浏览器历史记录中保存的每个请求创建链接，这样我就可以创建一个按钮并添加on.click goto 1请求。

提前谢谢

Answer 1

我建议使用内部页面链接的解决方案。当用户在浏览器中前进或后退或触发back（）事件时，您必须绑定到＆＃34; onpopstate＆＃34; event并使用state对象使窗口进入正确的状态。

$('#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":
       }
    }

  };

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

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

如何获取以前的ajax请求

1 个答案: