JavaScript $.ajax() 方法详解

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 链式调用)提升代码可维护性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值