当用户单击返回按钮返回上一个网页时如何再次调用 ajax？

Question

下面是我的代码..

HTML 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="body">
    <div class="dropdown_div">
        <select id="q_type" class="dropdown" onchange="getSubject(this.value)">
            <option>Question1</option>
            <option>Question2</option>  
        </select>
    </div>
    <div class="dropdown_div">
        <select id="q_subject" class="dropdown">
            <option>Subject1</option>
        </select>
    </div>
</div>

JS 代码

function getSubject(val){

  $("option", $("#q_subject")).remove();
  var option = "<option>Subject</option>";
  $("#q_subject").append(option);

    $.ajax({
      url: "api.path",
      type: 'POST',
      dataType: 'json',
      data: {id: id},
      async: true,
      cache: false,
      success: function(response) {
                    alert("Hi");
          $("option", $("#q_subject")).remove();
          var option = "<option>Subject1</option>"; 
          option += "<option value=1234>Subject2</option>"; 
          $("#q_subject").append(option); 
      }
    });
}

如何在我的代码中使用 pushState 并让用户可以单击返回按钮返回最后一页，然后仍然可以看到 ajax 数据？

Answer 1

首先，您应该将从ajax 请求收到的数据保存到浏览器local storage。之后，为了在浏览器“返回”按钮被触发时显示 ajax 结果，您应该将您在ajax.success() 方法中调用的语句绑定到窗口onpopstate 事件。为了省略代码重复，最好使用声明函数而不是匿名函数。

function success(response) {
    alert("Hi");
    $("option", $("#q_subject")).remove();
    var option = "<option>Subject1</option>"; 
    option += "<option value=1234>Subject2</option>"; 
    $("#q_subject").append(option); 
}

将数据保存到localstorage并调用success函数：

 $.ajax({
      url: "api.path",
      type: 'POST',
      dataType: 'json',
      data: {id: id},
      async: true,
      cache: false,
      success: function(response) {
          localStorage.setItem("response", response);
          success(response);
      }
    });

当“返回”按钮被触发时调用success()：

window.onpopstate = function (e) {
    var res = localStorage.getItem('response');         
    success(res);
}

Answer 2

我宁愿建议您使用关闭浏览器窗口时过期的 sessionStorage :)

 $.ajax({
          url: "api.path",
          type: 'POST',
          dataType: 'json',
          data: {id: id},
          async: true,
          cache: false,
          success: function(response) {
              sessionStorage.setItem("DataSaved", response);
              success(response);
          }
        });

然后

window.onpopstate = function (e) {
    var res = sessionStorage.getItem('DataSaved');         
    success(res);
}

Answer 3

您可以使用本地存储或会话存储来解决此问题。您还需要一个 onload 函数回调，以检查是否有任何以前的值存储在本地/会话存储中，如果是，则在选择框中显示该数据。

Answer 4

在使用 Ajax 从 JavaScript 生成的图表中导航 MVC-5 应用程序时，我注意到了这个 Back() 问题。图表中的所有点击都由 Ajax 处理。

上述解决方案不会替换整个正文，在修复的情况下，Back() 将仅恢复编辑字段。就我而言，我不需要那个。我需要从 AJAX 替换整个页面，并且还启用“后退”按钮以返回到我原来的图表上下文。

我尝试了上述解决方案来替换正文，我必须注意，它只会在

之后触发window.pop事件

 history.pushState({}, '')

但是当事件触发并使用 Ajax 填充正文时，我的 Javascript 将无法正确重新初始化图表页面。

我决定使用另一种模式，以规避 window.pop 事件并避免回发问题。下面的代码不会返回到 Ajax 代码上下文中，而是简单地替换当前页面，将来自服务器（=Controller）的 Ajax 返回信息作为重定向链接处理，例如

    var url = "/ProcessDiagram/MenuClick?command=" + idmenuparent+"_"+citem;  // my Ajax
    $.get(url,
        function (data) {
            window.location = data;  // Server returns a link, go for it !
            return true;             // Just return true after going to the link
        });

.. 这将保留 Back() 上下文，因为浏览器会处理这些事情。

控制器端组成重定向链接，如

    public ActionResult MenuClick(string command)
    {
        List<string> sl = command.Split(new char[] {'_'}).ToList();
        var prId = int.Parse(sl[0].Substring(3));

        if (sl[1] == "PU")
            return Content("/ProductionUnitTypes/Details/" + UnitContextId(prId) );

        if (sl[1] == "IR")
            return Content("/ItemRoles/Details/" +  RoleContextId(prId) );
       
        // etcetera
    }

Answer 5

我通过在 $.get() 函数之前包含以下代码解决了这个问题

$.ajaxSetup({cache: false});

有效！试试看:)