jquery ajax入門_jQuery AJAX入門指南

jquery ajax入門

在本系列的第一篇文章中，我們介紹了AJAX的基礎知識。 在第二篇中 ，我們看了一個使用普通JavaScript的工作示例。

在本教程中，我們将逐漸介紹jQuery的一些與AJAX相關的功能和方法 。 更具體地說，我們将仔細研究速記

load

方法和通用

ajax

函數。

使用

load

方法

jQuery的

load

方法是一種簡單但功能強大的方法，用于擷取遠端資料。 在下面可以看到其文法：

$(selector).load(url[, data][, complete])
           

下表顯示了其可能的參數：

參數	描述	需要
網址	包含請求發送到的URL的字元串。	是
資料	與請求一起發送到伺服器的資料（字元串或純對象）。	沒有
完成	成功完成或未成功完成請求時執行的回調函數。	沒有

這是回調函數的參數：

參數	描述
responseText	從請求中檢索的資料。
textStatus	一個字元串，用于分類請求的狀态。
jqXHR	jQuery XMLHttpRequest（jqXHR）對象，它是浏覽器的本機XMLHttpRequest（XHR）對象的超集。

下面的清單總結了

textStatus

參數的可能值：

- success
  - notmodified
  - nocontent
  - error
  - timeout
  - abort
  - parsererror
           

為了更好地了解

load

方法的工作原理，讓我們重新回顧上一教程中讨論的示例。

再看一下這個簡單HTML結構：

  
               

        
    Learn more about Einstein
        
    
      
   
      
           

看起來是這樣的：

請記住，單擊按鈕後，我們想用響應資料更新

#bio

元素的内容。

這是必需的jQuery代碼：

var $btn = $('#request');
      var $bio = $('#bio');

      $btn.on('click', function() {
      	$(this).hide();
      	$bio.load('Bio.txt', completeFunction);
      });
    
      function completeFunction(responseText, textStatus, request) {
      	$bio.css('border', '1px solid #e8e8e8');
      	if(textStatus == 'error') {
      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
      	} 
      }
           

假設該請求是成功的（即當

textStatus

是

success

或

notmodified

），最後的結果是這樣的：

另外，請考慮以下描述成功請求的可視化：

如果我們使用純JavaScript（請參閱前面的教程）送出請求，此可視化效果的左側部分将顯示XHR對象，該XHR對象在浏覽器控制台中列印。 另一方面，如果我們使用

load

方法，則右側部分将在列印時顯示相應的jqXHR對象。

但是，如果請求失敗，則會出現相應的消息。 為此，我們監視

textStatus

參數的值并顯示錯誤消息：

注意：如果您從本地環境運作示例（并将

Bio.txt

檔案存儲在其中），則錯誤消息可能會有所不同。 例如，您可能會看到以下結果：

最後，值得一提的是，預設情況下，除非我們将資料作為對象發送到伺服器，否則

load

方法使用HTTP

GET

方法。 隻有這樣，才會調用

POST

方法。

請參見下面的相關Codepen示範：

現在，讓我們修改從伺服器請求的檔案格式。 具體地說，對于此示例，所需資料包含在

Bio.html

檔案中，而不是

Bio.txt

檔案中。 還值得注意的是：目标檔案包含兩個段落。

假設我們隻想加載第一段，我們将必須更新初始代碼，如下所示：

$btn.on('click', function() {
          // this line only changes
          $bio.load('Bio.html p:first-child', completeFunction);
      });
           

看起來是這樣的：

這是Codepen示範：

結論

在本教程中，我示範了如何在jQuery中使用AJAX。 為了使事情變得更有趣，我們還處理了一些實際示例。 在本系列的最後一個教程中，我們将通過處理一個更複雜的示例來總結整個過程。

翻譯自: https://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-ajax-with-jquery--cms-25126

jquery ajax入門