$.ajax()方法详解

封面图 • 2026-01-16 • jQuery

`$.ajax()` 是 jQuery 中用于发送异步 HTTP 请求的核心方法，可以用来获取数据、提交表单、与服务器交互等。它是 jQuery 提供的最灵活、功能最强大的 AJAX 方法。

---

## ✅ 一、基本语法

```javascript
$.ajax({
    url: "目标URL",           // 必填项，请求的地址
    type: "GET",              // 请求类型：GET, POST, PUT, DELETE 等
    data: { key1: "value1" }, // 发送到服务器的数据（对象或字符串）
    dataType: "json",         // 期望返回的数据类型：json, xml, html, text, script 等
    success: function(response) { ... }, // 请求成功时的回调函数
    error: function(xhr, status, error) { ... }, // 请求失败时的回调函数
    complete: function(xhr, status) { ... }, // 请求完成后的回调（无论成功或失败）
    beforeSend: function(xhr, settings) { ... }, // 发送请求前的回调
    timeout: 5000,            // 超时时间（毫秒）
    headers: { ... },         // 自定义请求头
    contentType: "application/json", // 设置请求内容类型
    cache: false,             // 是否缓存
    async: true               // 是否异步，默认为true
});
```

---

## ✅ 二、常用参数详解

| 参数名 | 说明 |
|--------|------|
| **url** | 请求的目标 URL |
| **type** | 请求类型，如 `GET`, `POST` |
| **data** | 发送到服务器的数据，支持对象或字符串 |
| **dataType** | 预期的响应数据类型，如 `json`, `xml`, `html`, `text` |
| **success** | 请求成功后执行的回调函数，参数为响应数据 |
| **error** | 请求失败时执行的回调函数，参数为 `xhr`, `status`, `error` |
| **complete** | 请求完成后执行的回调函数（无论成功或失败） |
| **beforeSend** | 在请求发送前执行的回调函数，可修改 `xhr` 对象 |
| **timeout** | 请求超时时间（单位：毫秒） |
| **headers** | 自定义请求头 |
| **contentType** | 设置请求内容类型（如 JSON、表单等） |
| **cache** | 是否使用缓存（默认为 `true`） |
| **async** | 是否异步请求（默认为 `true`） |

---

## ✅ 三、示例代码

### 示例 1：GET 请求

```javascript
$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    dataType: "json",
    success: function(response) {
        console.log("请求成功:", response);
    },
    error: function(xhr, status, error) {
        console.error("请求失败:", error);
    }
});
```

### 示例 2：POST 请求

```javascript
$.ajax({
    url: "/submit-form",
    type: "POST",
    data: {
        username: "John",
        password: "123456"
    },
    dataType: "json",
    success: function(response) {
        console.log("提交成功:", response);
    },
    error: function(xhr, status, error) {
        console.error("提交失败:", error);
    }
});
```

---

## ✅ 四、`.ajax()` 的优势

- 简洁易用
- 支持多种请求方式（GET/POST/PUT/DELETE）
- 可以处理各种数据格式（JSON/XML/HTML/Text）
- 提供丰富的回调函数，便于控制流程
- 兼容性好（兼容大部分浏览器）

---

## ✅ 五、常见问题与注意事项

### 1. 跨域问题（CORS）
如果请求的是不同域名下的资源，可能会遇到跨域限制。需要服务器配置 CORS 头：

```http
Access-Control-Allow-Origin: *
```

### 2. 数据格式问题
确保 `dataType` 和实际返回的数据格式一致，否则可能无法正确解析。

### 3. 同源策略
浏览器对跨域请求有安全限制，需通过后端设置允许跨域访问。

### 4. 使用 `data` 传递参数
如果是 GET 请求，建议直接写在 URL 中；如果是 POST，推荐使用 `data` 参数。

---

## ✅ 六、`.ajax()` 与其它 jQuery AJAX 方法的关系

| 方法 | 说明 |
|------|------|
| `$.get()` | 封装了 GET 请求 |
| `$.post()` | 封装了 POST 请求 |
| `$.getJSON()` | 获取 JSON 数据 |
| `$.load()` | 加载 HTML 内容到元素中 |
| `$.ajaxSetup()` | 设置全局 AJAX 默认值 |

---

## ✅ 七、总结

`$.ajax()` 是 jQuery 中最强大、最灵活的 AJAX 方法，适用于各种异步请求场景。掌握它的参数和使用方式，能让你轻松实现前后端数据交互。

如果你需要更详细的示例或者特定场景（如上传文件、处理错误、进度条等），欢迎继续提问！