结合具体案例说明在项目中使用jQuery的AJAX异步请求的步骤

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <!-- 引入 jQuery -->
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    .login-form { max-width: 300px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; }
    .form-group { margin-bottom: 15px; }
    input { width: 100%; padding: 8px; margin-top: 5px; }
    button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }
    .error { color: red; margin-top: 10px; display: none; } /* 错误提示默认隐藏 */
    .loading { display: none; text-align: center; margin-top: 10px; } /* 加载动画默认隐藏 */
  </style>
</head>
<body>
  <div class="login-form">
    <h2>用户登录</h2>
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <button id="loginBtn">登录</button>
    <div class="loading">正在登录中...</div> <!-- 加载提示 -->
    <div class="error" id="errorMsg"></div> <!-- 错误提示 -->
  </div>
</body>
</html>

步骤 2：配置全局 AJAX 参数（初始化）

在项目入口处（如单独的 config.js 或页面底部脚本）设置全局 AJAX 配置，统一处理基础路径、超时时间和全局错误：

javascript

// 全局 AJAX 配置（放在 <script> 标签中，确保在登录逻辑前执行）
$(function() {
  // 设置全局默认参数
  $.ajaxSetup({
    url: "/api", // 接口基础路径（所有请求会拼接在该路径后）
    timeout: 5000, // 超时时间 5 秒
    dataType: "json", // 预期返回 JSON 格式
    headers: {
      "Content-Type": "application/x-www-form-urlencoded" // 表单提交格式
    }
  });

  // 全局错误处理（所有请求的失败都会触发）
  $(document).ajaxError(function(event, xhr) {
    if (xhr.status === 0) {
      showError("网络错误，请检查网络连接");
    } else if (xhr.status === 500) {
      showError("服务器异常，请稍后重试");
    }
  });
});

// 封装错误提示显示函数（复用）
function showError(msg) {
  $("#errorMsg").text(msg).show(); // 显示错误信息
  $("#loading").hide(); // 隐藏加载动画
  $("#loginBtn").prop("disabled", false).text("登录"); // 恢复按钮状态
}

步骤 3：封装登录请求函数（模块化）

将登录请求封装为独立函数，便于维护和复用（可放在 api.js 中）：

javascript

// 登录接口封装
function login(username, password) {
  // 返回 AJAX 的 deferred 对象，方便后续用 .done()/.fail() 处理
  return $.post("/login", { // 完整请求地址为：基础路径 + "/login" → "/api/login"
    username: username,
    password: password
  });
}

步骤 4：编写登录逻辑（事件绑定与请求处理）

给登录按钮绑定点击事件，获取表单数据，调用登录接口，并处理成功 / 失败场景：

javascript

// 页面加载完成后执行
$(function() {
  // 绑定登录按钮点击事件
  $("#loginBtn").click(function() {
    // 1. 获取表单数据
    const username = $("#username").val().trim();
    const password = $("#password").val().trim();

    // 2. 前端表单验证（减少无效请求）
    if (!username) {
      showError("请输入用户名");
      return;
    }
    if (!password) {
      showError("请输入密码");
      return;
    }

    // 3. 准备发送请求（优化用户体验）
    $("#errorMsg").hide(); // 隐藏之前的错误提示
    $(this).prop("disabled", true).text("登录中..."); // 禁用按钮，防止重复点击
    $("#loading").show(); // 显示加载动画

    // 4. 调用登录接口
    login(username, password)
      .done(function(response) {
        // 5. 处理成功响应（需验证后端返回格式）
        if (response.code === 200) {
          // 登录成功：保存 Token，跳转到首页
          localStorage.setItem("token", response.data.token);
          window.location.href = "/home"; // 跳转到首页
        } else {
          // 后端返回业务错误（如用户名密码错误）
          showError(response.msg || "登录失败");
        }
      })
      .fail(function(xhr) {
        // 6. 处理请求失败（如网络错误、服务器错误，全局错误已部分处理）
        // 这里可处理特定场景的失败（如 401 未授权）
        if (xhr.status === 401) {
          showError("账号已过期，请重新登录");
        }
      })
      .always(function() {
        // 7. 请求完成后（无论成功/失败）的清理工作
        $("#loading").hide();
        $("#loginBtn").prop("disabled", false).text("登录");
      });
  });
});

步骤 5：后端接口配合（模拟响应格式）

假设后端登录接口 /api/login 的响应格式如下（前后端需约定统一格式）：

json

// 成功响应
{
  "code": 200,
  "msg": "登录成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." // 身份令牌
  }
}

// 失败响应（如用户名密码错误）
{
  "code": 400,
  "msg": "用户名或密码错误",
  "data": null
}

关键步骤总结

页面准备：设计表单和状态提示区域（加载、错误）。
全局配置：通过 $.ajaxSetup() 统一基础路径、超时等参数，减少重复代码。
接口封装：将请求逻辑抽离为函数，提高复用性和可维护性。
前端验证：先验证表单数据（如非空），避免无效请求。
请求处理：
- 发送前：禁用按钮、显示加载动画（优化体验）。
- 成功后：验证后端数据格式，处理业务逻辑（如跳转、存 Token）。
- 失败后：区分网络错误和业务错误，显示对应提示。
清理工作：无论成功失败，都需恢复按钮状态、隐藏加载动画。