當用戶單擊后退按鈕返回上一個網頁時如何再次調用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更換整個頁面，也使返回按鈕，返回到我原來的圖上下文。

我嘗試了上面的解決方案來替換 body，我必須注意，它只會在之后觸發 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});

有用！ 嘗試一下 ：）