jquery.ajax之beforeSend方法使用介绍

封面图 • 2025-11-16 • jQuery

`jQuery.ajax()` 是 jQuery 中用于发起 AJAX 请求的通用方法。在发送请求之前，可以使用 `beforeSend` 回调函数来执行一些操作，比如设置请求头、显示加载提示等。

---

## 📌 `beforeSend` 方法简介

- **作用**：在 AJAX 请求发送之前执行。
- **参数**：
  - `jqXHR`：XMLHttpRequest 对象（或其模拟对象）。
  - `settings`：AJAX 请求的配置对象。
- **返回值**：如果返回 `false`，则中止请求。

---

## ✅ 基本语法

```javascript
$.ajax({
    url: 'your-url',
    type: 'GET', // 或 POST
    beforeSend: function(jqXHR, settings) {
        // 在这里写你的逻辑
    },
    success: function(response) {
        // 成功回调
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 错误回调
    }
});
```

---

## 💡 使用示例

### 示例 1：显示加载提示

```javascript
$.ajax({
    url: '/api/data',
    type: 'GET',
    beforeSend: function() {
        $('#loading').show(); // 显示加载动画
    },
    success: function(data) {
        $('#content').html(data);
        $('#loading').hide();
    },
    error: function() {
        alert('请求失败');
        $('#loading').hide();
    }
});
```

---

### 示例 2：设置自定义请求头

```javascript
$.ajax({
    url: '/api/secure-data',
    type: 'GET',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', 'Bearer your-token-here');
    },
    success: function(data) {
        console.log('数据:', data);
    }
});
```

---

### 示例 3：根据条件决定是否发送请求

```javascript
$.ajax({
    url: '/api/data',
    type: 'GET',
    beforeSend: function() {
        if (!confirm('确定要发送请求吗？')) {
            return false; // 阻止请求发送
        }
    },
    success: function(data) {
        console.log('成功获取数据:', data);
    }
});
```

---

## ⚠️ 注意事项

- `beforeSend` 只在请求实际发送前触发，不会在错误或超时时触发。
- 如果你修改了 `settings` 中的属性（如 `url`、`type`），这些更改会在请求中生效。
- 不要在 `beforeSend` 中执行耗时操作，否则会影响用户体验。

---

## 🧠 小贴士

如果你需要在所有 AJAX 请求中统一处理某些逻辑（如认证、加载提示等），可以考虑使用 `$.ajaxSetup()` 设置全局默认值：

```javascript
$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    }
});
```

---

如有其他关于 jQuery 的问题，欢迎继续提问！