介绍一下jQuery的AJAX异步请求

目录

一、核心方法：$.ajax()

二、简化方法（常用场景）

1. $.get()：快速发送 GET 请求（获取数据）

2. $.post()：快速发送 POST 请求（提交数据）

3. $.getJSON()：专门获取 JSON 数据

三、关键概念解析

四、实战案例：加载并显示数据

五、注意事项

---

jQuery 的 AJAX（Asynchronous JavaScript and XML）是一套简化异步网络请求的 API，它封装了原生 JavaScript 的 XMLHttpRequest，让开发者能更轻松地实现页面与服务器的无刷新数据交互（比如加载数据、提交表单、获取动态内容等）。

相比原生 JS，jQuery 的 AJAX 语法更简洁，无需处理复杂的兼容性问题，是前端开发中与后端通信的常用工具。

一、核心方法：$.ajax()

$.ajax() 是 jQuery AJAX 的基础方法，支持几乎所有 AJAX 配置，语法如下：

javascript

$.ajax({
  url: "请求地址",        // 必需，后端接口地址（如 "/api/data" 或 "data.json"）
  type: "GET",           // 可选，请求方式（GET/POST/PUT/DELETE 等），默认 GET
  data: {                // 可选，发送到服务器的数据（对象形式）
    username: "张三",
    age: 20
  },
  dataType: "json",      // 可选，预期服务器返回的数据类型（json/text/html/xml等）
  timeout: 5000,         // 可选，请求超时时间（毫秒），超过则触发错误
  beforeSend: function(xhr) {
    // 可选，发送请求前执行（如添加请求头、显示加载动画）
    console.log("准备发送请求...");
  },
  success: function(response) {
    // 必需，请求成功时执行（response 是服务器返回的数据）
    console.log("请求成功：", response);
  },
  error: function(xhr, status, error) {
    // 可选，请求失败时执行（如网络错误、服务器错误）
    console.log("请求失败：", status, error);
  },
  complete: function(xhr, status) {
    // 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
    console.log("请求结束");
  }
});

二、简化方法（常用场景）

为了简化常见操作，jQuery 提供了几个快捷方法：