jquery的ajax教程-建站教程-锦华智联科技

jQuery AJAX 教程：从入门到精通

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页的技术，jQuery 大大简化了 AJAX 操作，提供了简洁易用的 API。

（图片来源网络，侵删）

为什么使用 jQuery AJAX？
核心方法：$.ajax()
便捷方法：$.get(), $.post(), $.load()
实战演练：从服务器获取并显示数据
发送数据到服务器
处理服务器响应
全局 AJAX 事件
现代替代方案：fetch() API
最佳实践与注意事项

为什么使用 jQuery AJAX？

相比于原生的 JavaScript XMLHttpRequest 对象，jQuery 的 AJAX 优势在于：

语法简洁：代码更短，可读性更强。
浏览器兼容性：自动处理不同浏览器之间的差异，你无需编写兼容性代码。
丰富的回调函数：提供了 beforeSend, success, error, complete 等钩子函数，方便控制流程。
链式调用：可以方便地对返回的数据（如 JSON）进行操作。
便捷方法：提供了 $.get, $.post 等快速方法，满足常见需求。

核心方法：`$.ajax()`

$.ajax() 是 jQuery 中最底层、功能最强大的 AJAX 方法，所有其他的便捷方法（如 $.get）都是基于它封装的。

语法

$.ajax({
  name: value,
  name: value,
  ...
});

常用配置参数

参数	类型/默认值	描述
`url`	String	请求发送的 URL 地址。（必需）
`method`	String, 默认 `'GET'`	请求方法，如 `'GET'`, `'POST'`, `'PUT'`, `'DELETE'`。
`data`	Object, String	发送到服务器的数据，如果是对象，会自动转换为 URL 字符串。
`dataType`	String	预期服务器返回的数据类型，常见值：`'json'`, `'xml'`, `'html'`, `'text'`, `'script'`。
`success`	Function	请求成功时的回调函数。`(data, textStatus, jqXHR) => {}`
`error`	Function	请求失败时的回调函数。`(jqXHR, textStatus, errorThrown) => {}`
`complete`	Function	请求完成（无论成功或失败）时的回调函数。`(jqXHR, textStatus) => {}`
`beforeSend`	Function	发送请求前调用的函数，可以在此处添加自定义的 HTTP 头部。
`timeout`	Number, 默认 `0`	请求超时时间（毫秒）。
`async`	Boolean, 默认 `true`	是否异步请求，设为 `false` 时，将等待服务器响应。

便捷方法

为了简化常见的 GET 和 POST 请求，jQuery 提供了几个便捷方法。

`$.get()`

用于执行一个 GET 请求。

（图片来源网络，侵删）

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

示例：获取一个 JSON 文件

$.get("data.json", function(data) {
  console.log("获取到的数据:", data);
  // 假设 data 是 {name: "John", age: 30}
  $("#result").html("姓名: " + data.name);
}, "json");

`$.post()`

用于执行一个 POST 请求，通常用于向服务器提交数据。

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

示例：向服务器提交表单数据

$.post("save.php", {
  username: "testuser",
  password: "123456"
}, function(response) {
  console.log("服务器响应:", response);
  alert("数据提交成功！");
});

`$.load()`

这是一个非常特殊的方法,用于从服务器加载 HTML 内容并直接插入到匹配的元素中。

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

示例：加载页面的某个部分

// 加载 "demo.html" 文件中 id="my-section" 的内容，并放入 #result div 中
$("#result").load("demo.html #my-section");

实战演练：从服务器获取并显示数据

假设我们有一个后端 API https://api.example.com/users/1，它返回一个 JSON 对象：{"id": 1, "name": "Leanne Graham", "username": "Bret"}。

目标：点击按钮后，获取用户信息并显示在页面上。

（图片来源网络，侵删）

HTML 代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">jQuery AJAX 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body { font-family: sans-serif; }
    #user-info { border: 1px solid #ccc; padding: 15px; margin-top: 10px; display: none; }
  </style>
</head>
<body>
  <h1>获取用户信息</h1>
  <button id="get-user-btn">获取用户 #1</button>
  <div id="user-info">
    <p><strong>ID:</strong> <span id="user-id"></span></p>
    <p><strong>Name:</strong> <span id="user-name"></span></p>
    <p><strong>Username:</strong> <span id="user-username"></span></p>
  </div>
  <script>
    $(document).ready(function() {
      $("#get-user-btn").on("click", function() {
        // 使用 $.ajax() 方法
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/users/1", // 使用一个公开的测试 API
          method: "GET",
          dataType: "json", // 告诉 jQuery 我们期望返回 JSON 数据
          success: function(data) {
            // 请求成功，更新页面内容
            console.log("请求成功:", data);
            $("#user-id").text(data.id);
            $("#user-name").text(data.name);
            $("#user-username").text(data.username);
            $("#user-info").fadeIn(); // 淡入显示信息框
          },
          error: function(jqXHR, textStatus, errorThrown) {
            // 请求失败
            console.error("请求失败:", textStatus, errorThrown);
            alert("获取用户信息失败，请检查网络或稍后再试。");
          },
          complete: function() {
            console.log("请求完成（无论成功或失败）。");
          }
        });
      });
    });
  </script>
</body>
</html>

代码解析:

$(document).ready(...): 确保 DOM 完全加载后再执行 jQuery 代码。
$("#get-user-btn").on("click", ...): 为按钮绑定点击事件。
$.ajax({...}): 核心 AJAX 调用。
- url: 指定 API 地址。
- method: 使用 GET 方法获取数据。
- dataType: "json": 这是一个重要的提示，jQuery 会自动将返回的 JSON 字符串解析为 JavaScript 对象，你直接使用 data.name 即可，无需手动 JSON.parse()。
- success: 回调函数，当服务器返回 2xx 状态码时触发。data 参数就是服务器返回并解析后的数据。
- error: 回调函数，当请求失败（如网络错误、服务器 404/500 等）时触发。
- complete: 回调函数，在 success 或 error 执行之后执行。

发送数据到服务器

使用 data 参数可以轻松地向服务器发送数据，jQuery 会根据 method 自动处理编码。

示例：使用 POST 提交表单

HTML:

<form id="my-form">
  <input type="text" id="name-input" placeholder="你的名字">
  <input type="email" id="email-input" placeholder="你的邮箱">
  <button type="submit">提交</button>
</form>
<div id="form-message"></div>

JavaScript:

$("#my-form").on("submit", function(e) {
  // 阻止表单默认的提交行为（页面跳转）
  e.preventDefault(); 
  const name = $("#name-input").val();
  const email = $("#email-input").val();
  if (!name || !email) {
    $("#form-message").text("请填写所有字段！").css("color", "red");
    return;
  }
  $.ajax({
    url: "submit-form.php", // 你的后端处理脚本
    method: "POST",
    data: {
      name: name,
      email: email
    },
    success: function(response) {
      // 假设服务器返回 "success: true"
      if (response.success) {
        $("#form-message").text("提交成功！").css("color", "green");
        $("#my-form")[0].reset(); // 清空表单
      } else {
        $("#form-message").text("提交失败：" + response.message).css("color", "red");
      }
    },
    error: function() {
      $("#form-message").text("服务器错误，请稍后再试。").css("color", "red");
    }
  });
});

处理服务器响应

服务器返回的数据格式通常是 JSON、HTML 或纯文本。

JSON (推荐): 前后端数据交互的标准格式，在 $.ajax 中设置 dataType: "json"，jQuery 会自动解析。
HTML: 可以直接插入到 DOM 中，如 $.load() 方法。
Text: 纯文本，可以显示在 <p> 或 <div> 标签中。

全局 AJAX 事件

有时,你希望在页面上所有的 AJAX 请求都执行某些操作（如显示一个全局的“加载中...”提示），jQuery 提供了全局事件。

$(document).ajaxStart(): 任意一个 AJAX 请求即将开始时触发。
$(document).ajaxStop(): 当所有 AJAX 请求都完成时触发。
$(document).ajaxSend(): 在请求发送前触发。
$(document).ajaxComplete(): 请求完成时触发（无论成功或失败）。
$(document).ajaxSuccess(): 请求成功时触发。
$(document).ajaxError(): 请求失败时触发。

示例：显示全局加载动画

<style>
  #global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
  }
</style>
<div id="global-loader">加载中...</div>
<script>
  // 任意 AJAX 请求开始时
  $(document).ajaxStart(function() {
    $("#global-loader").fadeIn();
  });
  // 任意 AJAX 请求结束时
  $(document).ajaxStop(function() {
    $("#global-loader").fadeOut();
  });
  // 现在页面上所有的 $.ajax 调用都会触发这个全局效果
</script>

现代替代方案：`fetch()` API

随着浏览器的发展,现代 JavaScript 提供了原生的 fetch() API，它基于 Promise，语法更现代，并且不依赖任何库。

使用 fetch() 重写之前的示例：

$("#get-user-btn").on("click", function() {
  fetch("https://jsonplaceholder.typicode.com/users/1")
    .then(response => {
      // 检查响应状态
      if (!response.ok) {
        throw new Error("网络响应不正常");
      }
      // 将响应体解析为 JSON
      return response.json();
    })
    .then(data => {
      // 处理数据
      console.log("请求成功:", data);
      $("#user-id").text(data.id);
      $("#user-name").text(data.name);
      $("#user-username").text(data.username);
      $("#user-info").fadeIn();
    })
    .catch(error => {
      // 处理错误
      console.error("请求失败:", error);
      alert("获取用户信息失败！");
    });
    // .finally(() => {
    //   console.log("请求完成");
    // }); // 类似于 complete
});

fetch() vs $.ajax()

特性	`$.ajax()`	`fetch()`
依赖	需要 jQuery 库	原生浏览器 API，无需库
语法	配置对象	Promise 链式调用
错误处理	`error` 回调函数	`catch()` 块，但只对网络错误有效，需要手动检查 `response.ok`
数据解析	`dataType` 自动解析	需要手动调用 `.json()`, `.text()` 等
全局事件	支持	不支持

如果你的项目已经使用了 jQuery，$.ajax() 依然是一个稳定可靠的选择。
在新项目中,特别是使用现代框架（如 Vue, React）时，推荐使用 fetch() API 或基于 fetch 的库（如 axios）。

最佳实践与注意事项

CORS (跨域资源共享)：AJAX 默认遵循同源策略，如果你请求的 URL 与当前页面的域名、端口、协议不同，就会遇到跨域问题，这需要在服务器端设置正确的 HTTP 头部（如 Access-Control-Allow-Origin）来解决。
安全性：不要直接将用户输入的数据拼接到 URL 或请求参数中，以防注入攻击，jQuery 会帮你处理大部分编码，但保持警惕总是好的。
用户体验：对于耗时较长的请求，一定要给用户反馈（如加载动画、进度条），否则用户会以为页面卡死了。
错误处理：总是编写 error 或 catch 回调，优雅地处理失败情况，而不是让用户看到一团糟的错误信息。
缓存：GET 请求可能会被浏览器缓存，如果需要每次都获取最新数据，可以在 URL 后面添加一个时间戳或随机数：url: "api/data?timestamp=" + new Date().getTime()。

希望这份教程能帮助你彻底理解和使用 jQuery AJAX！

jquery的ajax教程

jQuery AJAX 教程：从入门到精通

目录

为什么使用 jQuery AJAX？

核心方法：$.ajax()

语法

常用配置参数

便捷方法

$.get()

$.post()

$.load()

实战演练：从服务器获取并显示数据

发送数据到服务器

处理服务器响应

全局 AJAX 事件

现代替代方案：fetch() API

最佳实践与注意事项

核心方法：`$.ajax()`

`$.get()`

`$.post()`

`$.load()`

现代替代方案：`fetch()` API