jQuery操作ajax

发表于 2024-05-24 更新于 2025-08-28 分类于 jQuery Waline：阅读次数：本文字数： 13k 阅读时长 ≈ 12 分钟

jQuery AJAX 操作详解：从基础方法到高级配置与实战

在前后端数据交互中，AJAX（Asynchronous JavaScript and XML）是实现 “异步加载数据、无刷新更新页面” 的核心技术。jQuery 封装了原生 JavaScript 的 XMLHttpRequest 对象，提供了 load()、$.get()、$.post() 和 $.ajax() 等简洁 API，大幅降低了 AJAX 开发复杂度。从 “基础方法对比→核心 API 详解→实战场景→常见问题” 四个维度，系统讲解 jQuery AJAX 的使用方法与最佳实践，帮你高效实现前后端数据交互。

jQuery AJAX 核心方法对比

jQuery 提供了四个常用 AJAX 方法，分别适用于不同场景，核心区别如下表所示。理解它们的适用范围，是选择合适方法的前提：

方法名	核心作用	请求类型	数据处理便捷性	适用场景
`load()`	加载远程 HTML 片段并插入到指定元素	GET（默认）/POST	低（直接插入 DOM）	简单页面片段加载（如加载导航、侧边栏）
`$.get()`	发送 GET 请求获取数据（无请求体）	GET	中（需手动处理数据）	简单查询（如根据 ID 获取详情、搜索数据）
`$.post()`	发送 POST 请求提交数据（有请求体）	POST	中（需手动处理数据）	数据提交（如表单提交、新增 / 修改数据）
`$.ajax()`	底层 AJAX 方法，支持全配置（推荐）	GET/POST/DELETE 等	高（支持全类型数据处理）	复杂场景（如自定义请求头、超时控制、文件上传）

基础 AJAX 方法详解

1. `load()`：加载 HTML 片段并插入 DOM

load() 是最简洁的 AJAX 方法，核心功能是 “请求远程 HTML 文件片段，并直接插入到指定 jQuery 元素中”，无需手动处理数据渲染（适合简单页面片段复用）。

语法：

$(selector).load(url [, data] [, callback]);

参数名	类型	可选性	核心作用
`selector`	jQuery 选择器	必选	数据加载后插入的目标元素（如 `$("#divTip")`）
`url`	字符串	必选	远程资源地址（如 `"/pages/nav.html"`、`"api/get-user"`）
`data`	对象 / 字符串	可选	发送到服务器的参数（对象格式会自动转为查询字符串，如 `{name: "zs"}` → `name=zs`）
`callback`	函数	可选	加载完成后的回调函数（无论成功 / 失败都会执行）

回调函数参数：

$(selector).load(url, data, function(responseText, statusText, xhr) {
  // responseText：服务器返回的原始数据（HTML 字符串）
  // statusText：请求状态（"success"、"error"、"abort"、"timeout"）
  // xhr：XMLHttpRequest 对象（可获取响应头、状态码等）
  if (statusText === "success") {
    console.log("加载成功，HTML 已插入 DOM");
  } else {
    console.error("加载失败：", xhr.status); // 如 404（未找到）、500（服务器错误）
  }
});

示例 1：加载静态 HTML 片段（导航栏）

<!-- 目标元素：加载导航后插入这里 -->
<div id="nav-container"></div>

<script>
// 加载 /pages/nav.html 并插入到 #nav-container
$("#nav-container").load("/pages/nav.html", function(response, status, xhr) {
  if (status === "error") {
    // 加载失败时显示默认导航
    $("#nav-container").html('<a href="/">首页</a> | <a href="/about">关于我们</a>');
  }
});
</script>

示例 2：带参数请求（动态加载用户信息）

<div id="user-info"></div>

<script>
// 发送参数 id=123 到 api/get-user，加载用户信息 HTML 片段
$("#user-info").load("api/get-user", {id: 123}, function(response, status) {
  if (status === "success") {
    console.log("用户信息加载成功");
  }
});
</script>

关键注意：

load() 默认使用 GET 请求，若 data 为对象或字符串，且浏览器支持，会自动转为 POST 请求；
仅适合加载 “HTML 片段”，若需处理 JSON 等非 HTML 数据，建议使用 $.get() 或 $.ajax()。

2. `$.get()`：发送 GET 请求获取数据

$.get() 专门用于发送 GET 请求（无请求体，参数通过 URL query 传递），适合 “查询数据” 场景（如获取列表、详情），需手动处理服务器返回的数据（如渲染 JSON 到 DOM）。

语法：

$.get(url [, data] [, success] [, dataType]);

参数名	类型	可选性	核心作用
`url`	字符串	必选	接口地址（如 `"api/user-list"`）
`data`	对象 / 字符串	可选	请求参数（如 `{page: 1, size: 10}`，会自动转为 `?page=1&size=10`）
`success`	函数	可选	请求成功后的回调函数（仅成功时执行）
`dataType`	字符串	可选	服务器返回数据类型（`"json"`、`"text"`、`"html"`，默认自动判断）

成功回调函数参数：

$.get(url, data, function(data, statusText, xhr) {
  // data：根据 dataType 处理后的数据（如 dataType="json" 则为 JSON 对象）
  // statusText：请求状态（仅 "success"，因失败不进入此回调）
  // xhr：XMLHttpRequest 对象
  console.log("获取到的数据：", data);
}, dataType);

示例：获取用户列表（JSON 数据）

<ul id="user-list"></ul>

<script>
// 发送 GET 请求，获取第 1 页用户列表（每页 10 条）
$.get(
  "api/user-list",          // 接口地址
  {page: 1, size: 10},      // 请求参数
  function(data, status, xhr) {
    // 假设服务器返回 JSON：{code: 200, data: [{id: 1, name: "zs"}, ...]}
    if (data.code === 200) {
      const userList = data.data;
      let html = "";
      // 渲染数据到 DOM
      userList.forEach(user => {
        html += `<li>ID: ${user.id} - 姓名: ${user.name}</li>`;
      });
      $("#user-list").html(html);
    } else {
      $("#user-list").html("<li>获取列表失败</li>");
    }
  },
  "json"                    // 指定数据类型为 JSON（避免手动 JSON.parse()）
);
</script>

关键注意：

GET 请求参数会暴露在 URL 中（如 api/user-list?page=1&size=10），不适合传递敏感数据（如密码）；
浏览器对 GET 请求有缓存机制，若需禁用缓存，可添加随机参数（如 {_t: new Date().getTime()}）。

3. `$.post()`：发送 POST 请求提交数据

$.post() 专门用于发送 POST 请求（有请求体，参数在请求体中传递），适合 “提交数据” 场景（如表单提交、新增 / 修改数据），数据安全性高于 GET 请求。

语法：

$.post(url [, data] [, success] [, dataType]);

参数与 $.get() 完全一致，唯一区别是 请求类型为 POST（参数在请求体中传递，不暴露在 URL 中）。

示例：提交表单数据（新增用户）

<form id="add-user-form">
  <input type="text" name="name" placeholder="姓名" required>
  <input type="age" name="age" placeholder="年龄" required>
  <button type="submit">提交</button>
</form>
<div id="msg"></div>

<script>
$("#add-user-form").submit(function(e) {
  e.preventDefault(); // 阻止表单默认提交（避免页面刷新）
  
  // 获取表单数据（转为对象：{name: "zs", age: 25}）
  const formData = $(this).serializeArray().reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});

  // 发送 POST 请求提交数据
  $.post(
    "api/add-user",          // 接口地址
    formData,                // 表单数据（请求体中传递）
    function(data, status) {
      // 假设服务器返回 JSON：{code: 200, msg: "新增成功"} 或 {code: 400, msg: "参数错误"}
      if (data.code === 200) {
        $("#msg").css("color", "green").text(data.msg);
        $(this)[0].reset(); // 重置表单
      } else {
        $("#msg").css("color", "red").text(data.msg);
      }
    }.bind(this),            // 绑定 this 为表单元素（便于重置）
    "json"                   // 数据类型为 JSON
  );
});
</script>

关键注意：

POST 请求默认发送 Content-Type: application/x-www-form-urlencoded（表单格式），若需发送 JSON 格式，需使用 $.ajax() 自定义请求头；
适合传递敏感数据（如密码、token），但需配合 HTTPS 协议确保传输安全。

高级 AJAX 方法：`$.ajax()`（推荐）

$.ajax() 是 jQuery AJAX 的底层核心方法，支持 GET、POST、DELETE 等所有 HTTP 方法，可配置超时、请求头、错误处理等高级功能，能覆盖 load()、$.get()、$.post() 的所有场景，是复杂项目的首选。

1. 核心配置项

$.ajax([options]) 的 options 是一个配置对象，包含以下常用属性（按使用频率排序）：

配置项	类型	默认值	核心作用
`url`	字符串	当前页面 URL	接口地址（必选，如 `"api/user/123"`）
`type`	字符串	`"GET"`	HTTP 请求方法（`"GET"`、`"POST"`、`"DELETE"`、`"PUT"` 等）
`data`	对象 / 字符串 / FormData	`null`	发送到服务器的参数（对象会自动转为对应格式，FormData 用于文件上传）
`dataType`	字符串	`auto`	服务器返回数据类型（`"json"`、`"text"`、`"html"`、`"xml"`，自动解析）
`contentType`	字符串 / 布尔	`"application/x-www-form-urlencoded; charset=UTF-8"`	请求体格式（`"application/json"` 用于 JSON 提交，`false` 用于文件上传）
`success`	函数	`null`	请求成功回调（参数：`data` 处理后数据、`status` 状态、`xhr` 对象）
`error`	函数	`null`	请求失败回调（参数：`xhr` 对象、`errorType` 错误类型、`errorMsg` 错误信息）
`beforeSend`	函数	`null`	请求发送前回调（参数：`xhr` 对象，返回 `false` 可取消请求）
`complete`	函数	`null`	请求完成回调（无论成功 / 失败，参数：`xhr` 对象、`status` 状态）
`timeout`	数字	`0`（无超时）	超时时间（毫秒，如 `3000` 表示 3 秒超时）
`async`	布尔	`true`	是否异步请求（`false` 为同步，会阻塞页面，不推荐）
`cache`	布尔	`true`（GET）	是否缓存请求结果（`false` 禁用缓存，添加 `_t` 随机参数）
`headers`	对象	`{}`	自定义请求头（如 `{Authorization: "Bearer token"}` 用于身份验证）

2. 典型场景示例

示例 1：发送 JSON 格式的 POST 请求（前后端分离常用）

传统 $.post() 默认发送表单格式数据，若服务器要求 JSON 格式（如 Content-Type: application/json），需用 $.ajax() 自定义配置：

// 要提交的 JSON 数据
const userData = {
  name: "张三",
  age: 25,
  email: "zhangsan@example.com"
};

$.ajax({
  url: "api/user",
  type: "POST",
  data: JSON.stringify(userData), // 将对象转为 JSON 字符串（关键）
  contentType: "application/json; charset=UTF-8", // 声明请求体格式为 JSON
  dataType: "json", // 期望服务器返回 JSON
  success: function(data, status, xhr) {
    if (data.code === 200) {
      alert("新增用户成功，ID：" + data.data.id);
    }
  },
  error: function(xhr, errorType, errorMsg) {
    console.error("请求失败：", errorType, errorMsg);
    alert("新增失败：" + xhr.responseJSON?.msg || "网络错误");
  },
  timeout: 5000 // 5 秒超时
});

示例 2：文件上传（FormData 格式）

上传文件需使用 FormData 对象，并设置 contentType: false（让浏览器自动处理请求头，包含文件边界信息）：

<input type="file" id="avatar" accept="image/*">
<button id="upload-btn">上传头像</button>
<div id="upload-msg"></div>

<script>
$("#upload-btn").click(function() {
  const fileInput = $("#avatar")[0];
  const file = fileInput.files[0];
  if (!file) {
    $("#upload-msg").text("请选择图片").css("color", "red");
    return;
  }

  // 创建 FormData 对象（用于文件上传）
  const formData = new FormData();
  formData.append("avatar", file); // 添加文件（name 为 "avatar"，与后端接收参数一致）
  formData.append("userId", 123);  // 附加其他参数

  $.ajax({
    url: "api/upload/avatar",
    type: "POST",
    data: formData,
    contentType: false, // 关键：禁用默认 Content-Type，由浏览器自动设置
    processData: false, // 关键：禁止 jQuery 处理 FormData（避免破坏文件格式）
    dataType: "json",
    beforeSend: function(xhr) {
      // 上传前显示加载状态
      $("#upload-btn").text("上传中...").prop("disabled", true);
    },
    success: function(data) {
      if (data.code === 200) {
        $("#upload-msg").text("上传成功！").css("color", "green");
        // 预览图片
        $("#upload-msg").append(`<img src="${data.data.url}" width="100" alt="头像">`);
      }
    },
    error: function(xhr) {
      $("#upload-msg").text("上传失败：" + xhr.responseJSON?.msg).css("color", "red");
    },
    complete: function() {
      // 无论成功/失败，恢复按钮状态
      $("#upload-btn").text("上传头像").prop("disabled", false);
    }
  });
});
</script>

示例 3：带身份验证的 GET 请求（Token 认证）

前后端分离项目中，常用 Authorization 请求头传递 Token 进行身份验证：

// 获取用户个人信息（需 Token 认证）
$.ajax({
  url: "api/user/profile",
  type: "GET",
  headers: {
    // 从 localStorage 中获取 Token（登录时存储）
    Authorization: "Bearer " + localStorage.getItem("token")
  },
  dataType: "json",
  error: function(xhr) {
    // 401 表示未授权（Token 过期或无效），跳转登录页
    if (xhr.status === 401) {
      alert("登录已过期，请重新登录");
      window.location.href = "/login.html";
    }
  },
  success: function(data) {
    // 渲染用户信息
    $("#profile-name").text(data.data.name);
    $("#profile-email").text(data.data.email);
  }
});

jQuery AJAX 常见问题与解决方案

1. 跨域请求被阻止（CORS 错误）

问题现象：

浏览器控制台报错：Access to XMLHttpRequest at 'http://api.example.com' from origin 'http://localhost:8080' has been blocked by CORS policy。

原因：

浏览器的 “同源策略” 限制（协议、域名、端口任一不同即为跨域），服务器未配置 CORS（跨域资源共享）允许当前域名访问。

解决方案：

服务器配置 CORS（推荐，根本解决）：
- 后端在响应头中添加 Access-Control-Allow-Origin: http://localhost:8080（允许指定域名）；
- 若需支持所有域名（开发环境），可设置 Access-Control-Allow-Origin: *（生产环境不推荐）。

前端使用 JSONP（仅支持 GET 请求，兼容性差）：

$.ajax({
  url: "http://api.example.com/user-list",
  dataType: "jsonp", // 启用 JSONP
  jsonp: "callback", // 回调函数参数名（默认 "callback"，需与后端一致）
  success: function(data) {
    console.log("跨域数据：", data);
  }
});

2. JSON 数据解析失败（`parsererror`）

问题现象：

error 回调触发，errorType 为 parsererror，控制台提示 Unexpected token < in JSON at position 0。

原因：

服务器返回的不是 valid JSON（如返回 HTML 错误页面、格式错误的 JSON）；
dataType 设为 "json"，但服务器返回数据类型不匹配。

解决方案：

查看服务器响应：在浏览器 “开发者工具 → Network → 对应请求 → Response” 中查看返回内容，确认是否为 JSON；

若服务器返回 HTML 错误（如 404 页面），检查url是否正确，或在error回调中处理：

error: function(xhr) {
  console.log("原始响应：", xhr.responseText); // 查看具体错误内容
  if (xhr.status === 404) {
    alert("接口地址不存在");
  }
}

若 JSON 格式错误（如缺少逗号、引号不匹配），协调后端修复接口。

3. 请求超时无反馈

问题现象：

网络差时，请求长时间无响应，用户无感知。

解决方案：

设置 timeout 配置（如 5 秒），超时后触发 error 回调；

在beforeSend中显示加载动画，complete中隐藏，提升用户体验：

$.ajax({
  url: "api/long-task", // 耗时接口（如数据导出）
  timeout: 10000, // 10 秒超时
  beforeSend: function() {
    // 显示加载动画
    $("#loading").show();
  },
  success: function(data) {
    alert("任务完成");
  },
  error: function(xhr, errorType) {
    if (errorType === "timeout") {
      alert("请求超时，请重试");
    }
  },
  complete: function() {
    // 隐藏加载动画
    $("#loading").hide();
  }
});

4. 重复发送请求（如多次点击按钮）

问题现象：

用户快速点击提交按钮，导致多次发送相同请求（如重复创建订单）。

解决方案：

请求发送前禁用按钮，complete中恢复：

let isRequesting = false; // 标记是否正在请求
$("#submit-btn").click(function() {
  if (isRequesting) return; // 正在请求中，忽略点击
  isRequesting = true;
  $(this).prop("disabled", true).text("提交中...");

  $.ajax({
    url: "api/submit-order",
    success: function() {
      alert("提交成功");
    },
    complete: function() {
      isRequesting = false;
      $("#submit-btn").prop("disabled", false).text("提交");
    }
  });
});

总结与最佳实践

1. 核心总结

方法选择：简单 HTML 加载用 load()，简单查询用 $.get()，简单提交用 $.post()，复杂场景（JSON 提交、文件上传、超时控制）用 $.ajax()；
数据类型：后端返回 JSON 时，务必设置 dataType: "json"，避免手动 JSON.parse()；
错误处理：必须实现 error 回调，覆盖网络错误、超时、接口错误等场景，提升用户体验；
跨域处理：优先通过服务器配置 CORS 解决跨域，避免使用 JSONP（仅支持 GET）。

2. 最佳实践建议

封装公共 AJAX 函数：避免重复代码，统一处理请求头、错误、加载状态（如添加 Token、统一错误提示）：

// 公共 AJAX 函数
function request(options) {
  // 默认配置
  const defaultOptions = {
    type: "GET",
    dataType: "json",
    timeout: 5000,
    headers: {
      Authorization: "Bearer " + localStorage.getItem("token")
    },
    error: function(xhr) {
      if (xhr.status === 401) {
        alert("登录过期，请重新登录");
        window.location.href = "/login.html";
      } else {
        alert("请求失败：" + (xhr.responseJSON?.msg || "网络错误"));
      }
    }
  };
  // 合并用户配置与默认配置（用户配置优先级高）
  const finalOptions = $.extend({}, defaultOptions, options);
  // 发送请求
  return $.ajax(finalOptions);
}

// 使用封装函数
request({
  url: "api/user-list",
  data: {page: 1, size: 10},
  success: function(data) {
    console.log("用户列表：", data);
  }
});

避免同步请求：async: false 会阻塞页面渲染，导致用户无法操作，除非特殊场景（如初始化配置），否则禁用；
使用 HTTPS：敏感数据（如密码、Token）必须通过 HTTPS 传输，防止中间人攻击；

清理无效请求：页面跳转前，若有未完成的请求，调用xhr.abort()取消（避免无用响应干扰）：

let xhr; // 保存请求对象
function fetchData() {
  xhr = $.ajax({
    url: "api/data",
    success: function(data) {
      console.log(data);
    }
  });
}
// 页面跳转前取消请求
window.onbeforeunload = function() {
  if (xhr && xhr.readyState !== 4) {
    xhr.abort();
  }
};

jQuery AJAX 是前端开发的经典技术，虽然现代项目更多使用 fetch API 或 Axios，但 jQuery AJAX 的设计思想（如配置化、回调机制）仍具有参考价值。掌握本文的核心方法与最佳实践，可高效解决前后端数据交互中的常见问题，为复杂项目开发奠定基础

jQuery AJAX 操作详解：从基础方法到高级配置与实战

jQuery AJAX 核心方法对比

基础 AJAX 方法详解

1. load()：加载 HTML 片段并插入 DOM

语法：

回调函数参数：

示例 1：加载静态 HTML 片段（导航栏）

示例 2：带参数请求（动态加载用户信息）

关键注意：

2. $.get()：发送 GET 请求获取数据

语法：

成功回调函数参数：

示例：获取用户列表（JSON 数据）

关键注意：

3. $.post()：发送 POST 请求提交数据

语法：

示例：提交表单数据（新增用户）

关键注意：

高级 AJAX 方法：$.ajax()（推荐）

1. 核心配置项

2. 典型场景示例

示例 1：发送 JSON 格式的 POST 请求（前后端分离常用）

示例 2：文件上传（FormData 格式）

示例 3：带身份验证的 GET 请求（Token 认证）

jQuery AJAX 常见问题与解决方案

1. 跨域请求被阻止（CORS 错误）

问题现象：

原因：

解决方案：

2. JSON 数据解析失败（parsererror）

问题现象：

原因：

解决方案：

3. 请求超时无反馈

问题现象：

解决方案：

4. 重复发送请求（如多次点击按钮）

问题现象：

解决方案：

总结与最佳实践

1. 核心总结

2. 最佳实践建议

1. `load()`：加载 HTML 片段并插入 DOM

2. `$.get()`：发送 GET 请求获取数据

3. `$.post()`：发送 POST 请求提交数据

高级 AJAX 方法：`$.ajax()`（推荐）

2. JSON 数据解析失败（`parsererror`）