JavaScript $.ajax() 方法详解
$.ajax() 是 jQuery 中用于发起异步 HTTP 请求的核心方法,支持 GET、POST、PUT、DELETE 等多种请求类型,能够灵活处理服务器响应和错误。以下是详细解析:
一、基础语法
javascript
$.ajax({
url: "https://api.example.com/data", // 请求地址
type: "GET", // 请求类型(默认 GET)
data: { key: "value" }, // 发送到服务器的数据
dataType: "json", // 期望的响应数据类型
success: function(response) { /* 处理成功响应 */ },
error: function(xhr, status, error) { /* 处理错误 */ },
complete: function() { /* 请求完成后执行 */ }
});
二、核心参数详解
三、回调函数与事件
1、success(已弃用,推荐用 done)
success: function(data, textStatus, jqXHR) { /* 成功处理 */ }
触发条件:HTTP 状态码 200-299 或 304。
参数:响应数据、状态文本、jqXHR 对象。
2、error(已弃用,推荐用 fail)
error: function(jqXHR, textStatus, errorThrown) { /* 错误处理 */ }
触发条件:HTTP 状态码 400-599 或网络错误。
参数:jqXHR 对象、错误状态(如 "timeout")、错误抛出信息。
3、complete(推荐保留)
complete: function(jqXHR, textStatus) { /* 请求完成处理 */ }
无论成功或失败均触发。
4、done / fail / always
$.ajax()
.done(function(data) { /* 成功 */ })
.fail(function(jqXHR) { /* 失败 */ })
.always(function() { /* 总是执行 */ });
更现代的链式调用方式,替代旧版回调。
四、高级用法
1.发送 JSON 数据
$.ajax({
url: "/api/submit",
type: "POST",
data: JSON.stringify({ name: "John" }),
contentType: "application/json",
dataType: "json"
});
2.处理 JSONP 跨域请求
$.ajax({
url: "https://api.example.com/data?callback=jQuery12345",
type: "GET",
dataType: "jsonp"
});
3.上传文件
$.ajax({
url: "/upload",
type: "POST",
data: new FormData($("#form")[0]),
processData: false, // 防止 jQuery 自动处理数据
contentType: false // 防止自动设置 Content-Type
});
4.取消请求
var xhr = $.ajax({ /* 请求配置 */ });
xhr.abort(); // 取消请求
五、响应状态码处理
通过 jqXHR 对象(即 success/error 中的第三个参数)获取 HTTP 状态码:
$.ajax({
url: "/api",
success: function(data, textStatus, jqXHR) {
if (jqXHR.status === 200) {
console.log("请求成功");
} else if (jqXHR.status === 404) {
console.log("资源未找到");
}
}
});
六、常见问题与注意事项
1.跨域问题(CORS)
服务器需设置响应头:Access-Control-Allow-Origin: * 或指定具体域名。
使用 xhrFields: { withCredentials: true } 发送带 Cookie 的请求。
2.数据格式错误
确保 dataType 与服务器返回的实际格式一致。
如接收 XML,需手动解析:$(jqXHR.responseXML)。
3.同步请求的风险
同步请求会阻塞浏览器,导致页面卡顿,严格禁止使用。
4.安全性
对用户输入进行编码(如 encodeURIComponent())。
POST 请求需添加 CSRF 令牌(如 headers: { "X-CSRFToken": csrfToken })。
七、示例:完整的 POST 请求
$.ajax({
url: "/login",
type: "POST",
data: {
username: $("#username").val(),
password: $("#password").val()
},
contentType: "application/json",
dataType: "json",
success: function(response) {
if (response.token) {
localStorage.setItem("token", response.token);
window.location.href = "/dashboard";
}
},
error: function(jqXHR) {
if (jqXHR.status === 401) {
alert("用户名或密码错误");
} else {
console.error("请求失败:", jqXHR.responseText);
}
}
});
八、替代方法:简化 API
对于简单请求,可使用以下快捷方法:
- $.get(): GET 请求
- $.post(): POST 请求
- $.getJSON(): GET + JSONP
- $.ajaxSetup(): 全局默认配置
// 使用 $.get()
$.get("/data", { id: 1 }, function(data) { console.log(data); });
通过掌握 $.ajax() 的核心参数和回调机制,开发者可以高效处理复杂的前后端交互场景,同时结合现代实践(如 Promise 链式调用)提升代码可维护性。