AJAX + css頁面轉換

Question

有人可以解釋一步一步的過程中的AJAX頁面轉換嗎？我已經看到很多解釋，但我似乎無法找到一步一步解釋它。 我似乎無法理解這個概念。也許像下面的代碼？甚至任何簡單的工作也可以實現。

基本上，我想顯示一個新的頁面，當我點擊我的導航菜單鏈接，而不必重新加載頁面。並可能爲此添加動畫。

此外，添加「錯誤」調用的意義是什麼，它是強制性的？

$(document).ready(function() { 

    $("#pages-load-area #pages-container").load("./pages/" + initialPage); 

    $("#header-navigation a").on("click", function() { 

     var urlPageName = $(this).attr("href"); 

     $.ajax({ 
      type: "GET", 
      url: "./pages/" + urlPageName, 
      processData: false, 
      crossDomain: true, 
      cache: false, 
      success: function(result, responseData) { 
       $("#pages-load-area #pages-container").html(result); 
      }, 
      error: function(responseData, textStatus, errorThrown) { 
       alert('AJAX failed'); 
      }, 
     }); 

     return false; 

    }); 
}); 

Answer 1

AJAX不做「頁面轉換」。它對服務器執行異步調用並運行返回函數或錯誤函數。 返回函數有一個參數，服務器可以向客戶端發送一些數據。有了這些數據，你可以做任何你想做的事情。

如果服務器發送下一頁並獲得了該結果，並且用結果替換了某些html，則可以使用此功能執行「頁面轉換」。但爲了讓你瞭解發生了什麼，保持概念分離是非常重要的。

所以，如果你發送一個Ajax請求是這樣的：

$.ajax({ 
     type: "GET", 
     url: "./pages/sum", 
     data: { 
      a: 3, 
      b: 4 
     }, 
     success: function(result) { 
      alert(result); 
     }, 
     error: function() { 
      alert('AJAX failed'); 
     }, 
    }); 

服務器用 '7' 響應。然後，您的警報將顯示7.「數據」中顯示的變量將從服務器中的GET範圍提供。我不知道你正在使用哪種服務器語言。在PHP中，將在$ _GET。一個PHP頁面，將返回的

例 '7'：

<?php 
    return $_GET['a'] + $_GET['b']; 
?> 

又如：

$.ajax({ 
     type: "GET", 
     url: "./pages/sum", 
     data: { 
      a: 3, 
      b: 4 
     }, 
     success: function(result) { 
      $("input#result").text(result); 
     }, 
     error: function() { 
      alert('AJAX failed'); 
     }, 
    }); 

現在一旦調用返回的命名輸入 「結果」 顯示 '7' 內的。

現在回到你的情況，你可以做url: "./pages/" + urlPageName,但你也可以使用： ：

$.ajax({ 
     type: "GET", 
     url: "./pages", 
     data: { 
      pageName: urlPageName 
     }, 
     success: function(result, responseData) { 
      $("#pages-load-area #pages-container").html(result); 
     }, 
     error: function(responseData, textStatus, errorThrown) { 
      alert('AJAX failed'); 
     }, 
    }); 

取決於你所使用的服務器技術，這可能使您的生活更輕鬆。因此，在這種情況下，你只需通過任何服務器返回給你替換HTML裏面的「＃頁負荷區域＃頁容器」元素。

還有一兩件事，在這一點上，你並不需要：

processData: false, 
crossDomain: true, 
cache: false, 

他們忘了，現在，回到它們時，你有你的主意Ajax調用更加清晰。

關於「返回false」，如果你從jQuery的文檔閱讀this頁面，您可能會注意到此相關的部分：

從事件處理程序返回false將自動調用 event.stopPropagation（）和事件。preventDefault（）方法」

這意味着，如果你有說，一個div裏面一個按鈕，您可以設置與return false結束事件的功能按鈕和股利onclick事件onclick事件，當你點擊該按鈕的div的onclick事件不會的，因爲假被解僱。所以，你將有隻有一個onclick事件。

我希望我已經澄清。隨意問更多，如果它目前尚不清楚。