当用户点击后退按钮返回上一个网页时，如何再次调用ajax？ [英] How to call ajax again when user click back button to go back last webpage?

问题描述

以下是我的代码..

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数据？

How do I use pushState into my code and let user can click back button to return last page and then still see the ajax data?

推荐答案

首先，你应该将从ajax请求收到的数据保存到浏览器 本地存储空间 。之后，为了在浏览器后退按钮被触发时显示ajax结果，你应该将你在 ajax.success（）方法中调用的语句绑定到window onpopstate 事件。要省略代码重复，最好使用声明的函数而不是匿名函数。

First of all, you should save data received from ajax request to browser local storage. Afterwards, in order to show ajax result when browser "back" button was fired, you should bind statements that you are calling in ajax.success() method to window onpopstate event. To omit code duplication, it`s better to use a declared function instead of anonymous one.

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 并致电成功功能：

Save data to localstorage and call success function:

 $.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（）按钮被触发：

Call success() when "back" button was fired:

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

这篇关于当用户点击后退按钮返回上一个网页时，如何再次调用ajax？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！