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

我通过在$ .get（）函数

之前包含以下代码解决了这个问题

$.ajaxSetup({cache: false});

有效！试试吧:)）

Answer 5

在使用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
    }

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

5 个答案: