jQuery - jQuery.ajax( options ) 方法

描述

jQuery.ajax( options ) 方法使用 HTTP 請求載入遠端頁面。

$.ajax() 返回它建立的 XMLHttpRequest 物件。在大多數情況下，您不需要直接操作該物件，但如果您需要手動中止請求，則可以使用它。

語法

以下是使用此方法的簡單語法：

$.ajax( options )

引數

以下是此方法使用所有引數的描述：

options - 一組配置 Ajax 請求的鍵值對。所有選項都是可選的。

序號	選項 & 描述
1	async 一個布林值，指示是否非同步執行請求。預設值為 true。
2	beforeSend 在傳送請求之前執行的回撥函式。
3	complete 請求完成時執行的回撥函式。
4	contentType 包含要為請求設定的 MIME 內容型別的字串。預設值為 application/x-www-form-urlencoded。
5	data 傳送到伺服器與請求一起傳送的對映或字串。
6	dataFilter 用於處理 XMLHttpRequest 的原始響應資料的函式。這是一個預過濾函式，用於清理響應。
7	dataType 一個字串，定義從伺服器期望返回的資料型別（xml、html、json 或 script）。
8	error 如果請求失敗則執行的回撥函式。
9	global 一個布林值，指示此請求是否會觸發全域性 AJAX 事件處理程式。預設值為 true。
10	ifModified 一個布林值，指示伺服器是否應在響應請求之前檢查頁面是否已修改。
11	jsonp 覆蓋 jsonp 請求中的回撥函式名稱。
12	password 響應 HTTP 訪問身份驗證請求時要使用的密碼。
13	processData 一個布林值，指示是否將提交的資料從物件表單轉換為查詢字串表單。預設值為 true。
14	success 如果請求成功則執行的回撥函式。
15	timeout 請求在失敗前超時的時間（以毫秒為單位）。
16	timeout 為請求設定本地超時（以毫秒為單位）。
17	type 一個字串，定義要用於請求的 HTTP 方法（GET 或 POST）。預設值為 GET。
18	url 包含傳送請求的 URL 的字串。
19	username 響應 HTTP 訪問身份驗證請求時要使用的使用者名稱。
20	xhr 用於建立 XMLHttpRequest 物件的回撥函式。預設為可用時的 ActiveXObject（IE），否則為 XMLHttpRequest。

示例

假設我們在 result.html 檔案中具有以下 HTML 內容：

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

以下是一個簡單的示例，展示了此方法的用法。在這裡，我們使用 success 處理程式填充返回的 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){
               $.ajax( {
                  url:'result.html',
                  success:function(data) {
                     $('#stage').html(data);
                  }
               });
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.html file:</p>
		
      <div id = "stage" style = "background-color:blue;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

這將產生以下結果：

jquery-ajax.htm

列印頁面