目录
2. $.post()：快速发送 POST 请求（提交数据）
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 等），默认 GET
data: { // 可选，发送到服务器的数据（对象形式）
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);
});
});
三、关键概念解析
“异步” 的含义
发送请求后，页面不会卡住等待服务器响应，而是继续执行其他代码，直到服务器返回数据后，再通过success回调处理结果。这避免了页面刷新或卡顿，提升用户体验。数据传递格式
- 发送数据：
data参数支持对象（自动转为key=value格式）或字符串（如"name=张三&age=20"）。 - 接收数据：常用
JSON格式（轻量、易解析），dataType: "json"会自动将返回的字符串转为 JS 对象。
- 发送数据：
跨域问题
默认情况下，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，你可以轻松实现动态加载内容、表单无刷新提交等功能，是构建现代交互式网页的核心技术之一。