jQuery AJAX 完整教程

目录

1. 什么是 AJAX？
2. 为什么使用 jQuery 的 AJAX？
3. 核心方法：$.ajax()
4. 快捷方法：$.get() 和 $.post()
5. 发送 JSON 数据
6. 处理表单提交
7. 全局 AJAX 事件
8. 最佳实践与常见错误

什么是 AJAX？

AJAX (Asynchronous JavaScript and XML) 不是一门新的编程语言，而是一种在无需重新加载整个网页的情况下,与服务器交换数据并更新部分网页的技术。

• 异步：这是 AJAX 的核心，它可以在后台与服务器进行数据交换，而用户无需等待,可以继续在页面上进行其他操作。
• 数据交换：通常使用 JSON 或 XML 格式在服务器和浏览器之间传递数据。
• 局部更新：只更新页面中需要改变的部分，而不是刷新整个页面,这提供了更好的用户体验。

一个生活中的比喻： 想象你在一家餐厅点餐。

• 传统方式：你吃完一道菜，整个餐厅（页面）都清空，然后重新上所有菜（页面刷新）,你在这期间不能做任何事。
• AJAX 方式：你点了一道新菜，服务员（AJAX）只把这道新菜端给你，其他菜和你的同桌人（页面其他部分）都保持不变，你可以边吃边和同桌聊天（页面交互）。

为什么使用 jQuery 的 AJAX？

原生 JavaScript 提供了 XMLHttpRequest 对象来实现 AJAX，但它的 API 相对繁琐且兼容性处理复杂。

jQuery 的 AJAX 方法对原生 XMLHttpRequest 进行了封装，提供了更简洁、强大、跨浏览器兼容的 API。

优点：

• 语法简洁：代码量大大减少。
• 浏览器兼容：自动处理不同浏览器的差异。
• 链式调用：代码结构清晰。
• 丰富的回调函数：方便处理请求的各个阶段（开始、成功、失败、完成）。
• 支持 Promise：可以和现代 JavaScript 的 async/await 结合使用。

核心方法：$.ajax()

$.ajax() 是 jQuery 中最底层、最强大的 AJAX 方法，其他所有快捷方法（如 $.get, $.post）都是对它的封装。

语法

$.ajax(url, [settings]);

或者

$.ajax(settings);

settings 对象的主要参数

示例：从服务器获取用户列表

假设我们有一个后端 API https://api.example.com/users，返回一个 JSON 数组。

// 显示加载提示
$("#loading").show();
$.ajax({
    url: "https://api.example.com/users",
    method: "GET",
    dataType: "json", // 告诉 jQuery 我们期望返回 JSON 数据
    success: function(data, textStatus, jqXHR) {
        // 请求成功，data 就是服务器返回的 JSON 对象
        console.log("获取数据成功:", data);
        // 清空列表容器
        $("#user-list").empty();
        // 遍历数据并渲染到页面上
        $.each(data, function(index, user) {
            $("#user-list").append(`<li>${user.name} - ${user.email}</li>`);
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败
        console.error("请求失败:", textStatus, errorThrown);
        $("#user-list").html("<li>加载失败，请稍后重试。</li>");
    },
    complete: function() {
        // 请求完成（无论成功失败），隐藏加载提示
        $("#loading").hide();
    }
});

快捷方法：$.get() 和 $.post()

对于最常见的 GET 和 POST 请求，jQuery 提供了更简单的快捷方法。

$.get() - 用于 GET 请求

$.ajax({
    url: "url",
    method: "GET",
    success: function(data) { ... }
});
// 等同于
$.get("url", function(data) {
    // data 是服务器返回的数据
    console.log(data);
});

语法: $.get(url, [data], [callback], [dataType])

• data: 可选,作为查询字符串发送的数据。
• callback: 可选,请求成功时的回调函数。
• dataType: 可选,预期返回的数据类型。

示例：

$.get("https://api.example.com/users", function(data) {
    console.log("用户列表:", data);
});

$.post() - 用于 POST 请求

$.ajax({
    url: "url",
    method: "POST",
    data: { name: "John", age: 30 },
    success: function(data) { ... }
});
// 等同于
$.post("url", { name: "John", age: 30 }, function(data) {
    // data 是服务器返回的数据
    console.log(data);
});

语法: $.post(url, [data], [callback], [dataType])

• data: 可选,作为请求体发送的数据。
• callback: 可选,请求成功时的回调函数。
• dataType: 可选,预期返回的数据类型。

示例：

$.post("https://api.example.com/create-user", 
    { 
        username: "newuser", 
        password: "123456" 
    }, 
    function(response) {
        console.log("创建用户成功:", response);
        alert("用户创建成功！");
    }
);

发送 JSON 数据

在现代 Web 开发中，发送和接收 JSON 数据是最常见的场景。$.ajax() 可以轻松处理。

发送 JSON 数据到服务器

关键在于设置 contentType 和 data。

const userData = {
    name: "Alice",
    email: "alice@example.com",
    is_active: true
};
$.ajax({
    url: "https://api.example.com/users",
    method: "POST",
    // 1. 告诉服务器我们发送的是 JSON 数据
    contentType: "application/json; charset=utf-8", 
    // 2. 将 JavaScript 对象转换为 JSON 字符串再发送
    data: JSON.stringify(userData), 
    success: function(response) {
        console.log("创建成功:", response);
    },
    error: function() {
        console.error("创建失败");
    }
});

接收 JSON 数据

关键在于设置 dataType: "json"。

$.ajax({
    url: "https://api.example.com/users/1",
    method: "GET",
    dataType: "json", // 告诉 jQuery 自动解析 JSON
    success: function(user) { // 这里的 user 已经是一个 JavaScript 对象了
        console.log("用户名:", user.name);
        console.log("邮箱:", user.email);
    }
});

处理表单提交

使用 AJAX 提交表单可以避免页面刷新,提升用户体验。

手动序列化表单数据

$("#myForm").on("submit", function(event) {
    // 1. 阻止表单的默认提交行为（页面刷新）
    event.preventDefault();
    // 2. 获取表单数据
    const formData = {
        username: $("#username").val(),
        password: $("#password").val()
    };
    // 3. 发送 AJAX 请求
    $.post("https://api.example.com/login", formData, function(response) {
        if (response.success) {
            alert("登录成功！");
            window.location.href = "/dashboard"; // 跳转页面
        } else {
            alert("登录失败：" + response.message);
        }
    });
});

使用 $.serialize() (推荐)

$.serialize() 方法可以将表单内容编码为 URL 字符串格式,非常方便。

<form id="searchForm">
    <input type="text" name="keyword" placeholder="搜索关键词">
    <select name="category">
        <option value="all">所有分类</option>
        <option value="tech">技术</option>
    </select>
    <button type="submit">搜索</button>
</form>
<div id="searchResults"></div>

$("#searchForm").on("submit", function(event) {
    event.preventDefault();
    // 序列化表单数据，结果如 "keyword=jquery&category=tech"
    const serializedData = $(this).serialize();
    $.get("https://api.example.com/search?" + serializedData, function(data) {
        $("#searchResults").html(data); // 假设服务器返回 HTML 片段
    });
});

全局 AJAX 事件

有时，我们希望在页面上所有 AJAX 请求的某个阶段都执行一些操作，例如显示一个全局的加载动画，jQuery 提供了全局 AJAX 事件。

• ajaxStart: 任何 AJAX 请求即将发送时触发。
• ajaxStop: 所有 AJAX 请求完成时触发。
• ajaxSend: 任何 AJAX 请求发送前触发。
• ajaxComplete: 任何 AJAX 请求完成（无论成功失败）后触发。
• ajaxSuccess: 任何 AJAX 请求成功时触发。
• ajaxError: 任何 AJAX 请求失败时触发。

示例：全局加载动画

// 当任何一个 AJAX 请求开始时，显示加载动画
$(document).on("ajaxStart", function() {
    $("#global-loading").show();
});
// 当任何一个 AJAX 请求结束时，隐藏加载动画
$(document).on("ajaxStop", function() {
    $("#global-loading").hide();
});

最佳实践与常见错误

最佳实践

1. 始终处理错误：网络可能不稳定，服务器可能出错。error 回调是必须的。
2. 提供用户反馈：在请求开始时显示加载动画，在结束时隐藏,让用户知道程序正在工作。
3. 使用 dataType 或 contentType：明确声明你发送和接收的数据类型,可以避免很多不必要的麻烦。
4. 安全性：防止 XSS（跨站脚本攻击），不要直接将未经过滤的用户数据插入到 HTML 中，使用 .text() 代替 .html(),或者对内容进行转义。
5. 避免过度使用全局事件：全局事件虽然方便，但可能会在复杂的应用中导致意外的行为,只在必要时使用。

常见错误

1. 跨域问题

   • 现象：在浏览器控制台看到错误，如 No 'Access-Control-Allow-Origin' header is present on the requested resource。
   • 原因：出于安全考虑，浏览器禁止网页向不同源（协议、域名、端口任一不同）的服务器发起 AJAX 请求。
   • 解决：这通常需要在服务器端进行配置，设置响应头 Access-Control-Allow-Origin,前端开发者无法直接解决。

2. 路径错误

   • 现象：404 Not Found 错误。
   • 原因：url 参数写错了。
   • 解决：仔细检查 URL 是否正确，特别是相对路径，可以使用浏览器的开发者工具 > Network 面板查看请求的 URL。

3. 数据格式不匹配

   • 现象：服务器返回的数据无法解析，或者 success 回调中的 data 类型不对。
   • 原因：前端设置的 dataType 和服务器实际返回的 Content-Type 不一致。
   • 解决：确保 dataType 和服务器返回的 Content-Type 头匹配，前端设为 dataType: "json"，服务器应返回 Content-Type: application/json。

如何选择？

• 日常 GET/POST 请求：优先使用 $.get() 和 $.post(),简单快捷。
• 复杂请求：需要设置特殊头部（headers）、处理超时、需要 beforeSend 或 complete 等精细控制时，使用 $.ajax()。
• 表单提交：推荐使用 $.post() 结合 $(form).serialize()。

掌握了 jQuery AJAX，你就能轻松地构建出动态、交互性强的现代化网页，虽然现在原生 Fetch API 也非常流行，但 jQuery 仍然因其稳定性和易用性在许多项目中占据一席之地，理解 jQuery AJAX 的原理，对你学习 Fetch API 也会有很大帮助。