jQuery .ajax() 方法详解
本文详细介绍了 jQuery 的 .ajax() 方法，并包含一个实际案例讲解。
jQuery .ajax() 方法简介
jQuery 的 .ajax() 方法是用于执行异步 HTTP (Ajax) 请求的。该方法功能强大且灵活，可以处理各种类型的 HTTP 请求，并允许你自定义请求的各个方面。
以下是 .ajax() 方法的基本语法：
$.ajax({
url: "请求地址",
type: "请求类型 (GET 或 POST)",
dataType: "预期服务器返回的数据类型 (json, xml, html, text)",
success: function(response) {
// 请求成功时的回调函数
},
error: function(xhr, status, error) {
// 请求失败时的回调函数
}
});案例讲解：使用 .ajax() 方法获取服务器数据
在这个案例中，我们将演示如何使用 .ajax() 方法从服务器获取数据，并在页面上显示这些数据。
假设我们有一个后端 API，返回以下 JSON 数据：
{
"name": "张三",
"age": 30,
"city": "北京"
}以下是完整的 HTML 和 jQuery 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Ajax 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "https://api.example.com/user", // 替换为你的 API 地址
type: "GET",
dataType: "json",
success: function(response) {
$("#name").text(response.name);
$("#age").text(response.age);
$("#city").text(response.city);
},
error: function(xhr, status, error) {
alert("请求失败: " + error);
}
});
});
</script>
</head>
<body>
<h1>用户信息</h1>
<p>姓名: <span id="name"></span></p>
<p>年龄: <span id="age"></span></p>
<p>城市: <span id="city"></span></p>
</body>
</html>在这个示例中，当页面加载完成后，jQuery 的 $(document).ready() 方法会触发一个 AJAX 请求。请求成功后，服务器返回的数据会被填充到页面的相应位置。
