当用户点击后退按钮返回上一个网页时,如何再次调用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()方法中调用的语句绑定到window 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);
}