jQuery - Ajax

AJAX 是 Asynchronous JavaScript and XML 的首字母縮寫，這項技術可以幫助我們從伺服器載入資料，而無需重新整理瀏覽器頁面。

如果您不熟悉 AJAX，建議您在繼續學習之前先閱讀我們的 Ajax 教程。

JQuery 是一款非常棒的工具，它提供了一套豐富的 AJAX 方法來開發下一代 Web 應用程式。

載入簡單資料

使用 JQuery AJAX 載入任何靜態或動態資料都非常容易。JQuery 提供了 load() 方法來完成這項工作 -

語法

以下是 load() 方法的簡單語法 -

[selector].load( URL, [data], [callback] );

以下是所有引數的描述 -

URL - 傳送請求的伺服器端資源的 URL。它可以是動態生成資料或從資料庫中獲取資料的 CGI、ASP、JSP 或 PHP 指令碼。
data - 此可選引數表示一個物件，其屬性被序列化為正確編碼的引數，以傳遞給請求。如果指定，則使用 POST 方法進行請求。如果省略，則使用 GET 方法。
callback - 在響應資料載入到匹配集合的元素後呼叫的回撥函式。傳遞給此函式的第一個引數是從伺服器接收到的響應文字，第二個引數是狀態程式碼。

示例

考慮以下包含少量 JQuery 程式碼的 HTML 檔案 -

線上演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

這裡 load() 初始化對指定 URL /jquery/result.html 檔案的 Ajax 請求。載入此檔案後，所有內容都將填充到 ID 為 stage 的 <div> 標籤中。假設我們的 /jquery/result.html 檔案只有一行 HTML -

<h1>THIS IS RESULT...</h1>

當您單擊給定的按鈕時，result.html 檔案將被載入。

獲取 JSON 資料

可能會出現伺服器根據您的請求返回 JSON 字串的情況。JQuery 實用程式函式 getJSON() 將返回的 JSON 字串解析，並將結果字串作為第一個引數提供給回撥函式，以採取進一步操作。

語法

以下是 getJSON() 方法的簡單語法 -

[selector].getJSON( URL, [data], [callback] );

以下是所有引數的描述 -

URL - 透過 GET 方法聯絡的伺服器端資源的 URL。
data - 一個物件，其屬性用作構建要附加到 URL 的查詢字串的名稱/值對，或預格式化和編碼的查詢字串。
callback - 請求完成後呼叫的函式。將 JSON 字串作為響應主體進行處理後得到的資料值作為第一個引數傳遞給此回撥函式，狀態作為第二個引數傳遞。

示例

考慮以下包含少量 JQuery 程式碼的 HTML 檔案 -

線上演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

這裡 JQuery 實用程式方法 getJSON() 初始化對指定 URL result.json 檔案的 Ajax 請求。載入此檔案後，所有內容都將傳遞給回撥函式，該函式最終將填充到 ID 為 stage 的 <div> 標籤中。假設我們的 result.json 檔案具有以下 JSON 格式的內容 -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

當您單擊給定的按鈕時，result.json 檔案將被載入。

將資料傳遞到伺服器

很多時候，您會從使用者那裡收集輸入，並將該輸入傳遞到伺服器以進行進一步處理。JQuery AJAX 使得使用任何可用 Ajax 方法的 data 引數將收集到的資料傳遞到伺服器變得非常容易。

示例

此示例演示如何將使用者輸入傳遞到 Web 伺服器指令碼，該指令碼將傳送相同的結果，然後我們將列印它 -

線上演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

以下是 result.php 指令碼中編寫的程式碼 -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

現在您可以在給定的輸入框中輸入任何文字，然後單擊“顯示結果”按鈕以檢視您在輸入框中輸入的內容。

JQuery AJAX 方法

您已經瞭解了使用 JQuery 的 AJAX 的基本概念。下表列出了所有重要的 JQuery AJAX 方法，您可以根據您的程式設計需要使用這些方法 -

序號	方法及說明
1	jQuery.ajax( options ) 使用 HTTP 請求載入遠端頁面。
2	jQuery.ajaxSetup( options ) 為 AJAX 請求設定全域性設定。
3	jQuery.get( url, [data], [callback], [type] ) 使用 HTTP GET 請求載入遠端頁面。
4	jQuery.getJSON( url, [data], [callback] ) 使用 HTTP GET 請求載入 JSON 資料。
5	jQuery.getScript( url, [callback] ) 使用 HTTP GET 請求載入並執行 JavaScript 檔案。
6	jQuery.post( url, [data], [callback], [type] ) 使用 HTTP POST 請求載入遠端頁面。
7	load( url, [data], [callback] ) 從遠端檔案載入 HTML 並將其注入 DOM。
8	serialize( ) 將一組輸入元素序列化為資料字串。
9	serializeArray( ) 像 .serialize() 方法一樣序列化所有表單和表單元素，但會返回 JSON 資料結構供您使用。

JQuery AJAX 事件

您可以在 AJAX 呼叫進度生命週期期間呼叫各種 JQuery 方法。根據不同的事件/階段，可以使用以下方法 -

您可以瀏覽所有 AJAX 事件。

序號	方法及說明
1	ajaxComplete( callback ) 附加一個函式，以便在任何 AJAX 請求完成後執行。
2	ajaxStart( callback ) 附加一個函式，以便在任何 AJAX 請求開始並且沒有其他活動請求時執行。
3	ajaxError( callback ) 附加一個函式，以便在任何 AJAX 請求失敗時執行。
4	ajaxSend( callback ) 附加一個函式，以便在傳送 AJAX 請求之前執行。
5	ajaxStop( callback ) 附加一個函式，以便在所有 AJAX 請求都結束時執行。
6	ajaxSuccess( callback ) 附加一個函式，以便在任何 AJAX 請求成功完成時執行。

列印頁面