目錄

一、核心方法：$.ajax()

二、簡化方法（常用場景）

1.?$.get()：快速發送 GET 請求（獲取數據）

2.?$.post()：快速發送 POST 請求（提交數據）

3.?$.getJSON()：專門獲取 JSON 數據

三、關鍵概念解析

四、實戰案例：加載并顯示數據

五、注意事項

---

jQuery 的 AJAX（Asynchronous JavaScript and XML）是一套簡化異步網絡請求的 API，它封裝了原生 JavaScript 的?XMLHttpRequest，讓開發者能更輕松地實現頁面與服務器的無刷新數據交互（比如加載數據、提交表單、獲取動態內容等）。

相比原生 JS，jQuery 的 AJAX 語法更簡潔，無需處理復雜的兼容性問題，是前端開發中與后端通信的常用工具。

一、核心方法：$.ajax()

$.ajax()?是 jQuery AJAX 的基礎方法，支持幾乎所有 AJAX 配置，語法如下：

javascript

$.ajax({url: "請求地址",        // 必需，后端接口地址（如 "/api/data" 或 "data.json"）type: "GET",           // 可選，請求方式（GET/POST/PUT/DELETE 等），默認 GETdata: {                // 可選，發送到服務器的數據（對象形式）username: "張三",age: 20},dataType: "json",      // 可選，預期服務器返回的數據類型（json/text/html/xml等）timeout: 5000,         // 可選，請求超時時間（毫秒），超過則觸發錯誤beforeSend: function(xhr) {// 可選，發送請求前執行（如添加請求頭、顯示加載動畫）console.log("準備發送請求...");},success: function(response) {// 必需，請求成功時執行（response 是服務器返回的數據）console.log("請求成功：", response);},error: function(xhr, status, error) {// 可選，請求失敗時執行（如網絡錯誤、服務器錯誤）console.log("請求失敗：", status, error);},complete: function(xhr, status) {// 可選，請求完成后執行（無論成功或失敗，如隱藏加載動畫）console.log("請求結束");}
});

二、簡化方法（常用場景）

為了簡化常見操作，jQuery 提供了幾個快捷方法：

1.?$.get()：快速發送 GET 請求（獲取數據）

適用于從服務器獲取數據（如加載列表、詳情等），語法：

javascript

// 語法：$.get(請求地址, [發送的數據], 成功回調函數, [預期數據類型])
$.get("https://api.example.com/users", { page: 1 }, function(data) {// 成功獲取數據后執行console.log("用戶列表：", data);
}, "json"); // 預期返回 JSON 格式

2.?$.post()：快速發送 POST 請求（提交數據）

適用于向服務器提交數據（如表單提交、注冊信息等），語法：

javascript

// 語法：$.post(請求地址, [發送的數據], 成功回調函數, [預期數據類型])
$.post("/api/register", {username: "小明",password: "123456"
}, function(response) {console.log("注冊結果：", response);
}, "json");

3.?$.getJSON()：專門獲取 JSON 數據

簡化版的?$.get()，自動指定?dataType: "json"，適合加載 JSON 格式數據：

javascript

// 加載本地 JSON 文件（模擬后端數據）
$.getJSON("data/users.json", function(users) {// 直接使用 JSON 數據（無需解析）users.forEach(user => {console.log(user.name);});
});

三、關鍵概念解析

1. “異步” 的含義
   發送請求后，頁面不會卡住等待服務器響應，而是繼續執行其他代碼，直到服務器返回數據后，再通過?success?回調處理結果。這避免了頁面刷新或卡頓，提升用戶體驗。

2. 數據傳遞格式

   • 發送數據：data?參數支持對象（自動轉為?key=value?格式）或字符串（如?"name=張三&age=20"）。
   • 接收數據：常用?JSON?格式（輕量、易解析），dataType: "json"?會自動將返回的字符串轉為 JS 對象。

3. 跨域問題
   默認情況下，AJAX 只能請求同域名下的接口（瀏覽器安全限制）。若需請求其他域名，需后端配置?CORS（跨域資源共享）?允許跨域，否則會觸發錯誤。

四、實戰案例：加載并顯示數據

假設后端提供一個獲取文章列表的接口?"/api/articles"，返回 JSON 數據：

json

{"success": true,"data": [{ "id": 1, "title": "jQuery 入門" },{ "id": 2, "title": "AJAX 詳解" }]
}

用 jQuery 加載并顯示到頁面：

html

預覽

<ul id="articleList"></ul>
<button id="loadBtn">加載文章</button><script>$("#loadBtn").click(function() {// 點擊按鈕后發送請求$.get("/api/articles", function(res) {if (res.success) {// 清空列表$("#articleList").empty();// 遍歷數據，添加到頁面res.data.forEach(article => {$("#articleList").append(`<li>${article.title}</li>`);});} else {alert("加載失敗");}}).error(function() {alert("網絡錯誤，請重試");});});
</script>

五、注意事項

• 避免濫用同步請求：$.ajax()?中設置?async: false?可開啟同步請求，但會阻塞頁面，影響體驗，不推薦使用。
• 處理加載狀態：在?beforeSend?中顯示 “加載中” 提示，complete?中隱藏，提升用戶體驗。
• 數據驗證：服務器返回的數據需先驗證（如?res.success），再進行后續處理，避免報錯。

通過 jQuery AJAX，你可以輕松實現動態加載內容、表單無刷新提交等功能，是構建現代交互式網頁的核心技術之一。