<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Ajax请求示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.example {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 10px;
padding: 10px;
border: 1px solid #eee;
min-height: 50px;
}
</style>
</head>
<body>
<h1>jQuery Ajax请求示例</h1>
<!-- 示例1：$.ajax() 方法 -->
<div class="example">
<h2>1. $.ajax() 方法</h2>
<p>这是最基础、最灵活的Ajax方法。</p>
<button id="ajaxBtn">发送请求</button>
<div id="ajaxResult"></div>
</div>
<!-- 示例2：$.get() 方法 -->
<div class="example">
<h2>2. $.get() 方法</h2>
<p>简化的GET请求方法。</p>
<button id="getBtn">发送GET请求</button>
<div id="getResult"></div>
</div>
<!-- 示例3：$.post() 方法 -->
<div class="example">
<h2>3. $.post() 方法</h2>
<p>简化的POST请求方法。</p>
<button id="postBtn">发送POST请求</button>
<div id="postResult"></div>
</div>
<!-- 示例4：$.getJSON() 方法 -->
<div class="example">
<h2>4. $.getJSON() 方法</h2>
<p>专门用于获取JSON数据的简化方法。</p>
<button id="jsonBtn">获取JSON数据</button>
<div id="jsonResult"></div>
</div>
<!-- 示例5：$.load() 方法 -->
<div class="example">
<h2>5. $.load() 方法</h2>
<p>从服务器加载数据并将返回的HTML放入匹配的元素中。</p>
<button id="loadBtn">加载HTML片段</button>
<div id="loadResult"></div>
</div>
<script>
$(document).ready(function() {
// 示例1：$.ajax() 方法
$("#ajaxBtn").click(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET",
dataType: "json",
success: function(data) {
$("#ajaxResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
},
error: function(xhr, status, error) {
$("#ajaxResult").html("请求失败: " + status);
}
});
});
// 示例2：$.get() 方法
$("#getBtn").click(function() {
$.get(
"https://jsonplaceholder.typicode.com/posts/2",
function(data) {
$("#getResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
}
).fail(function() {
$("#getResult").html("请求失败");
});
});
// 示例3：$.post() 方法
$("#postBtn").click(function() {
$.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1
},
function(data) {
$("#postResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
}
).fail(function() {
$("#postResult").html("请求失败");
});
});
// 示例4：$.getJSON() 方法
$("#jsonBtn").click(function() {
$.getJSON(
"https://jsonplaceholder.typicode.com/posts/3",
function(data) {
$("#jsonResult").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
}
).fail(function() {
$("#jsonResult").html("请求失败");
});
});
// 示例5：$.load() 方法
$("#loadBtn").click(function() {
// 注意：由于跨域限制，这里使用一个允许跨域的示例URL
$("#loadResult").load("https://jsonplaceholder.typicode.com/posts/4 #dummy", function(response, status, xhr) {
if (status == "error") {
$("#loadResult").html("加载失败，这是模拟结果。实际使用时可以加载HTML片段。");
}
});
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
