当前位置：首页 > news >正文

介绍一下jQuery的AJAX异步请求

news 2025/8/12 11:54:34

一、核心方法：$.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);});
});

三、关键概念解析

“异步” 的含义
发送请求后，页面不会卡住等待服务器响应，而是继续执行其他代码，直到服务器返回数据后，再通过 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>