本文介绍如何利用 jQuery AJAX 根据点击元素的 ID（如 pizza、lasagna）向 PHP 后端发送请求，安全查询 MySQL 数据库并动态渲染对应商品详情，涵盖前端事件绑定、参数传递、SQL 防注入及响应处理全流程。
本文介绍如何利用 jquery ajax 根据点击元素的 id（如 `pizza`、`lasagna`）向 php 后端发送请求，安全查询 mysql 数据库并动态渲染对应商品详情，涵盖前端事件绑定、参数传递、sql 防注入及响应处理全流程。
在构建动态内容展示页面时，常见需求是：用户点击一个具有唯一 ID 的卡片（如 <div class="product" id="pizza">），页面不刷新即可异步加载该商品对应的数据库记录（如名称、描述、发布时间）。实现这一功能的核心在于 <strong>前端精准捕获点击目标 ID → 通过 AJAX 提交 → 后端安全查询 → 返回结构化 HTML → 前端插入显示</strong>。<h3>✅ 正确的前端实现（jQuery + AJAX）</h3>
<p>原始代码中使用 <code>FormData(this) 是错误的——FormData 适用于表单（<form></form>）元素，而 div 不支持。应直接读取当前被点击元素的 id 属性，并以标准键值对形式提交：
jQuery(function () {
jQuery('.product').on('click', function (e) {
// 获取被点击 div 的 ID（如 "pizza"）
const productId = jQuery(this).attr('id');
// 发送 POST 请求，携带 product ID
jQuery.ajax({
type: 'POST',
url: 'php/recipe-container.php',
data: { data: productId }, // 关键：将 ID 作为参数传递
dataType: 'html', // 明确预期返回 HTML 字符串
success: function(response) {
jQuery('.display_recipe').html(response);
},
error: function(xhr, status, error) {
console.error('AJAX 请求失败:', status, error);
jQuery('.display_recipe').html('<p>加载失败，请稍后重试。</p>');
}
});
});
});
? 提示：使用
jQuery替代$可避免与其它库冲突；dataType: 'html'确保响应被正确解析为字符串。
✅ 安全可靠的后端处理（PHP + MySQLi）
原始 PHP 中硬编码 'pizza' 且未过滤输入，存在严重 SQL 注入风险。必须使用 预处理语句（Prepared Statements） 并校验输入合法性：
<?php // php/recipe-container.php
header('Content-Type: text/html; charset=utf-8');
// 1. 获取并验证输入
if (!isset($_POST['data']) || !is_string($_POST['data']) || empty(trim($_POST['data']))) {
echo '<p>无效请求。';
exit;
}
$productName = trim($_POST['data']);
// 2. 数据库连接（建议使用配置文件或 PDO）
$con = mysqli_connect("localhost", "root", "", "cookbook");
if (!$con) {
die('<p>数据库连接失败。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件"><img
src="https://img.php.cn/upload/webcode/000/000/164/6152aff85d347738.jpg" alt="AJAX技术—无刷新获取数据相关课件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件" class="overflowclass">AJAX技术—无刷新获取数据相关课件</a>
<p class="overflowclass">AJAX技术—无刷新获取数据相关课件</p>
</div>
<a rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>');
}
// 3. 使用预处理语句防止 SQL 注入
$stmt = mysqli_prepare($con, "SELECT name, description, date FROM product WHERE name = ?");
mysqli_stmt_bind_param($stmt, "s", $productName);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
// 4. 构建 HTML 响应
if (mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$response = htmlspecialchars($row['name'], ENT_HTML5) . '<br>';
$response .= nl2br(htmlspecialchars($row['description'], ENT_HTML5)) . '<br>';
$response .= htmlspecialchars(date('Y-m-d', strtotime($row['date'])), ENT_HTML5) . '<br>';
echo $response;
} else {
echo '<p>未找到该商品信息。</p>';
}
mysqli_stmt_close($stmt);
mysqli_close($con);
?>
⚠️ 关键安全实践：
- 永远不要拼接用户输入到 SQL 字符串中；
- 使用
mysqli_prepare()+mysqli_stmt_bind_param()实现参数化查询；- 输出前用
htmlspecialchars()转义 HTML 特殊字符，防止 XSS；- 对空/非法输入做早期拦截，提升健壮性。
✅ 完整 HTML 结构示例
确保 HTML 中包含可点击元素与目标容器，并引入 jQuery（推荐 CDN）：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script src="js/script.js"></script><!-- 存放上述 JS 代码 --><div class="product" id="pizza">? Pizza</div>
<div class="product" id="lasagna">? Lasagna</div>
<div class="product" id="sushi">? Sushi</div>
<div class="display_recipe" style="margin-top: 20px; padding: 12px; border: 1px solid #ddd; min-height: 60px;">
<!-- 动态内容将插入此处 -->
</div>
✅ 总结与进阶建议
- ✅ 核心逻辑闭环：ID → AJAX → PHP 查询 → HTML 响应 → DOM 插入；
- ✅ 必须防御：SQL 注入（预处理）、XSS（输出转义）、空请求（服务端校验）；
- ? 可扩展方向：
- 改用
fetch()API 替代 jQuery AJAX，更轻量现代； - 后端改用 PDO 并封装数据库操作类；
- 前端添加加载状态（如
.display_recipe.html('<span>加载中...</span>')）； - 支持键盘访问（
tabindex="0"+keydown监听回车事件）。
- 改用
只要严格遵循“输入校验 → 安全查询 → 安全输出”三原则，即可稳定、安全地实现基于 ID 的动态内容加载。
