<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery动态获取数据并传参</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.info {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 100px;
background-color: #f9f9f9;
}
.user-item {
padding: 10px;
margin: 5px 0;
background-color: #e9e9e9;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery动态获取数据示例</h1>
<div class="info">
本示例演示如何使用jQuery点击获取动态数据并进行参数传递。
</div>
<h2>示例1：获取用户数据</h2>
<button id="getUserBtn">获取用户数据(不带参数)</button>
<button id="getUserWithParamBtn">获取用户数据(带ID参数)</button>
<input type="number" id="userIdInput" placeholder="输入用户ID" value="1" min="1" max="10">
<h2>示例2：搜索产品</h2>
<input type="text" id="productSearch" placeholder="输入产品关键词">
<button id="searchProductBtn">搜索产品</button>
<div id="result">
<p>结果将显示在这里...</p>
</div>
</div>
<script>
$(document).ready(function() {
// 模拟API响应数据
var mockUsers = {
1: { id: 1, name: "张三", email: "zhangsan@example.com" },
2: { id: 2, name: "李四", email: "lisi@example.com" },
3: { id: 3, name: "王五", email: "wangwu@example.com" },
4: { id: 4, name: "赵六", email: "zhaoliu@example.com" }
};
var mockProducts = [
{ id: 101, name: "笔记本电脑", price: 5999 },
{ id: 102, name: "智能手机", price: 2999 },
{ id: 103, name: "平板电脑", price: 1999 },
{ id: 104, name: "智能手表", price: 999 }
];
// 示例1：获取用户数据(不带参数)
$("#getUserBtn").click(function() {
$("#result").html("<p>正在获取用户数据...</p>");
// 模拟AJAX请求
setTimeout(function() {
var html = "<h3>所有用户数据：</h3>";
$.each(mockUsers, function(key, user) {
html += `<div class="user-item">
ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}
</div>`;
});
$("#result").html(html);
}, 800);
});
// 示例1：获取用户数据(带参数)
$("#getUserWithParamBtn").click(function() {
var userId = $("#userIdInput").val();
if(!userId || userId < 1) {
alert("请输入有效的用户ID");
return;
}
$("#result").html(`<p>正在获取ID为 ${userId} 的用户数据...</p>`);
// 模拟AJAX请求
setTimeout(function() {
if(mockUsers[userId]) {
var user = mockUsers[userId];
var html = `<h3>用户详情：</h3>
<div class="user-item">
ID: ${user.id}<br>
姓名: ${user.name}<br>
邮箱: ${user.email}
</div>`;
$("#result").html(html);
} else {
$("#result").html(`<p>未找到ID为 ${userId} 的用户</p>`);
}
}, 800);
});
// 示例2：搜索产品(带参数)
$("#searchProductBtn").click(function() {
var keyword = $("#productSearch").val().trim();
if(!keyword) {
alert("请输入搜索关键词");
return;
}
$("#result").html(`<p>正在搜索包含"${keyword}"的产品...</p>`);
// 模拟AJAX请求
setTimeout(function() {
var filteredProducts = mockProducts.filter(function(product) {
return product.name.indexOf(keyword) !== -1;
});
if(filteredProducts.length > 0) {
var html = `<h3>搜索结果：</h3>`;
filteredProducts.forEach(function(product) {
html += `<div class="user-item">
ID: ${product.id}, 名称: ${product.name}, 价格: ¥${product.price}
</div>`;
});
$("#result").html(html);
} else {
$("#result").html(`<p>没有找到包含"${keyword}"的产品</p>`);
}
}, 800);
});
// 实际AJAX请求示例(注释掉的真实请求代码)
/*
function getRealUserData(userId) {
$.ajax({
url: 'https://api.example.com/users',
method: 'GET',
data: { id: userId },
dataType: 'json',
success: function(response) {
// 处理响应数据
console.log(response);
},
error: function(xhr, status, error) {
console.error("请求失败: " + status + ", " + error);
}
});
}
*/
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
