jQuery AJAX简介 – BuildCodePro

jQuery AJAX 知识点汇总

给编程小白的通俗易懂指南 – 异步请求原来这么简单！

🔍 AJAX 是什么？

AJAX 的全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 XML）。

🍦 冰激凌店比喻

想象你在一家冰激凌店点单：

1. 传统方式（非AJAX）：你把订单交给店员 → 店员去后厨制作 → 你只能干等着不能做其他事 → 店员把冰激凌给你

2. AJAX方式：你把订单交给店员 → 你继续和朋友聊天/玩手机 → 冰激凌做好后店员通知你 → 你拿到冰激凌

AJAX的核心就是：不需要刷新整个页面，就可以在后台悄悄和服务器交换数据并更新部分网页内容。

为什么需要 AJAX？

在 AJAX 出现之前，每次用户操作都需要重新加载整个页面，体验很差。使用 AJAX 后：

用户操作后页面不会闪屏刷新
只更新需要变化的部分
后台发送/接收数据，用户无感知
大大提升用户体验

🛠️ jQuery 的 AJAX 方法

jQuery 提供了一组 AJAX 方法，让发送异步请求变得非常简单。主要方法有：

$.ajax()

最基础最灵活的方法，可以配置各种参数。

$.get()

发送简单的 GET 请求，用于获取数据。

$.post()

发送 POST 请求，用于提交数据。

$.getJSON()

专门获取 JSON 格式的数据。

基本语法结构

                $.ajax({

                  url: “请求的地址”,

                  type: “GET或POST”,

                  data: { // 要发送到服务器的数据

                    “key1”: “value1”,

                    “key2”: “value2”

                  },

                  success: function(response) {

                    // 请求成功时执行

                    // 使用返回的数据(response)更新页面

                  },

                  error: function(xhr, status, error) {

                    // 请求失败时执行

                    // 处理错误情况

                  }

                });

🔑 核心参数详解

1. url（必需）

你要请求的服务器地址，可以是相对路径或绝对路径。

2. type/method

请求方式：GET（获取数据）或 POST（提交数据）。

3. data

要发送到服务器的数据，可以是对象或字符串。

                // 对象形式

                data: { “username”: “john”, “age”: 30 }

                // 字符串形式

                data: “username=john&age=30”

4. dataType

你期望服务器返回的数据类型，常用值：

“json” – 返回 JSON 数据
“text” – 返回纯文本
“html” – 返回 HTML 片段
“xml” – 返回 XML 数据

5. success

请求成功时的回调函数，参数是服务器返回的数据。

6. error

请求失败时的回调函数，参数包含错误信息。

7. complete

请求完成时（无论成功或失败）都会执行的函数。

🚀 简化方法：$.get() 和 $.post()

📌 小白提示

如果你不需要复杂的配置，优先使用 $.get() 和 $.post()，它们更简单！

$.get() 示例

                // 获取用户信息

                $.get(“get_user.php”, // 请求地址

                  { “user_id”: 123 }, // 发送的数据

                  function(data) { // 成功回调

                    alert(“用户名: “ + data.username);

                  }

                );

$.post() 示例

                // 提交表单数据

                $.post(“save_user.php”, // 请求地址

                  { // 发送的数据

                    “name”: “张三”,

                    “email”: “zhangsan@example.com”

                  },

                  function(response) {

                    alert(“保存成功！”);

                  }

                );

💡 实际应用示例

AJAX 请求演示

点击按钮从服务器获取一条随机名言：

实现代码

                // 当按钮被点击时

                $(“#quoteBtn”).click(function() {

                  // 使用jQuery的get方法请求数据

                  $.get(“https://api.quotable.io/random”, function(data) {

                    // 请求成功，处理返回的JSON数据

                    var quote = “<p><strong>” + data.content + “</strong></p>”;

                    quote += “<p>– “ + data.author + “</p>”;

                    // 将名言显示在页面上

                    $(“#quoteResult”).html(quote);

                  });

                });

⚠️ 注意事项与常见问题

1. 跨域问题

浏览器默认禁止向不同域名（端口或协议不同也算）发送AJAX请求，这称为”同源策略”。

💡 解决方案

• 使用 JSONP（只适用于GET请求）

• 服务器设置CORS（跨域资源共享）响应头

• 使用代理服务器

2. 异步特性

AJAX中的”A”代表”异步”，这意味着代码不会等待请求完成，而是继续执行后面的代码。

                console.log(“请求开始”);

                $.get(“myurl”, function() {

                  console.log(“请求完成”);

                });

                console.log(“请求发送后”);

                // 输出顺序：

                // 请求开始

                // 请求发送后

                // 请求完成

3. 错误处理

一定要添加错误处理回调，处理网络问题或服务器错误。

                $.ajax({

                  url: “api/data”,

                  success: function(data) {

                    console.log(“成功:”, data);

                  },

                  error: function(xhr) {

                    alert(“请求失败! 状态码: “ + xhr.status);

                  }

                });

✅ 总结

AJAX 是什么

异步请求技术，无需刷新整个页面即可获取数据

核心方法

$.ajax(), $.get(), $.post(), $.getJSON()

核心步骤

1. 发送请求
2. 等待响应
3. 处理数据

核心参数

url, type, data, success, error

👍 给小白的学习建议

1. 先从 $.get() 和 $.post() 开始练习

2. 理解请求和响应的概念

3. 使用 console.log() 查看返回的数据

4. 逐步尝试更复杂的 $.ajax() 配置

5. 学会使用Chrome开发者工具查看网络请求