本文详解如何将商品列表页中的每个项目正确链接到独立的 product.php 详情页，通过 URL 参数（GET）或表单提交（POST）安全传递 ID，并规范 HTML 结构与 PHP 输出方式。
本文详解如何将商品列表页中的每个项目正确链接到独立的 `product.php` 详情页，通过 url 参数（get）或表单提交（post）安全传递 id，并规范 html 结构与 php 输出方式。
在 PHP 动态网站开发中，实现“点击商品卡片跳转至对应详情页”是基础但关键的一环。核心在于：将数据库中每条商品记录的唯一 ID 安全、准确地嵌入链接或表单中，并在目标页面（如 product.php）中可靠读取和使用该 ID 查询数据。
✅ 正确生成带 ID 的链接（推荐 GET 方式）
最简洁、语义清晰的方式是使用 @#@#@#@#@#@#@#@#@#@0 缺少实际值，应动态拼接 $product['id']：
<?php foreach ($products as $product): ?><article class="products__card"><!-- ✅ 正确：将 ID 作为查询参数传入 --><a href="./product.php?id=<?php%20echo%20(int)%24product['id'];%20?>">
@@##@@" alt="<?php echo htmlspecialchars($product['Device_name']); ?>" class="product__image" width="300" height="200">
<h3 class="products__title"><?php echo htmlspecialchars($product['Device_name']); ?></h3>
<span class="products__price"><?php echo number_format((float)$product['price']); ?> UGX</span>
</a>
<button class="products__button">
<span class="uil uil-shopping-bag" aria-hidden="true"></span>
<span class="visually-hidden">Add to cart</span>
</button>
</article><?php endforeach; ?>
? 关键改进说明：
href="./product.php?id=<?php echo (int)$product['id']; ?>"：强制类型转换(int)防止恶意字符串注入；htmlspecialchars()包裹输出内容，防止 XSS 攻击；<img src="<?php%20echo%20htmlspecialchars(%24product['image']);%20?>%20%E8%A1%A5%E5%85%A8%20width/height%20%E5%B1%9E%E6%80%A7%EF%BC%88%E6%8F%90%E5%8D%87%E6%B8%B2%E6%9F%93%E6%80%A7%E8%83%BD%E4%B8%8E%E5%B8%83%E5%B1%80%E7%A8%B3%E5%AE%9A%E6%80%A7%EF%BC%89%EF%BC%9B%20%20- %E4%BD%BF%E7%94%A8%20
<span></span>%20%E6%9B%BF%E4%BB%A3%E5%B7%B2%E5%BA%9F%E5%BC%83%E8%AF%AD%E4%B9%89%E7%9A%84%20<i></i>%20%E6%A0%87%E7%AD%BE%EF%BC%8C%E5%B9%B6%E6%B7%BB%E5%8A%A0%20aria-hidden%20%E4%B8%8E%E8%BE%85%E5%8A%A9%E6%96%87%E6%9C%AC%E6%8F%90%E5%8D%87%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%EF%BC%9B%20%20- %E7%A7%BB%E9%99%A4%E5%86%97%E4%BD%99%20
<input%20type=" hidden>—— 在纯跳转场景下无需隐藏域。
? 在 product.php 中安全接收并使用 ID
product.php 需主动验证并过滤传入的 id，再执行数据库查询：
<?php // product.php
require_once 'db.php'; // 假设已建立 mysqli 连接 $conn
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
http_response_code(400);
die('Invalid product ID.');
}
$id = (int)$_GET['id'];
$stmt = $conn->prepare("SELECT id, Device_name, price, image, description FROM Products WHERE id = ?");
$stmt->bind_param('i', $id);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows === 0) {
http_response_code(404);
die('Product not found.');
}
$product = $result->fetch_assoc();
?>
<!-- 渲染商品详情 -->
<h1><?php echo htmlspecialchars($product['Device_name']); ?></h1>
@@##@@" alt="<?php echo htmlspecialchars($product['Device_name']); ?>" width="400" height="300">
<p><?php echo htmlspecialchars($product['description']); ?></p>
<span class="price"><?php echo number_format($product['price']); ?> UGX</span>
⚠️ 注意事项与最佳实践
-
不要混用 PHP/HTML 模式频繁切换：像
<?php echo ... ?>内联写法虽可行，但易出错。优先采用结构化输出（如上述foreach块），保持逻辑清晰； -
避免直接拼接 SQL 或输出未过滤变量：始终对用户输入（包括 URL 参数）做
(int)或filter_var($id, FILTER_SANITIZE_NUMBER_INT)处理； -
GET vs POST 的选择：
- ✅ 查看详情 → 用 GET（可收藏、分享、刷新安全）；
- ❌ 提交订单/修改数据 → 用 POST（防重复提交、更安全）；
-
图片标签必须闭合：
<img>（XHTML 风格）或<img src="<?php%20echo%20htmlspecialchars(%24product['image']);%20?>%EF%BC%88HTML5%EF%BC%89%E5%9D%87%E5%8F%AF%EF%BC%8C%E4%BD%86%E4%B8%8D%E5%8F%AF%E9%81%97%E6%BC%8F%20/>%20%E6%88%96%E7%BB%93%E6%9D%9F%E6%A0%87%E7%AD%BE%EF%BC%9B - %E8%AF%AD%E4%B9%89%E5%8C%96%E4%B8%8E%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%EF%BC%9A%E7%94%A8%20
<button></button>%20%E6%88%96%20<a></a>%20%E6%89%BF%E8%BD%BD%E4%BA%A4%E4%BA%92%E8%A1%8C%E4%B8%BA%EF%BC%8C%E9%81%BF%E5%85%8D%E6%97%A0%E6%84%8F%E4%B9%89%E7%9A%84%20<i></i>%EF%BC%9B%E4%B8%BA%E5%9B%BE%E6%A0%87%E6%B7%BB%E5%8A%A0%20aria-hidden=" true>，并辅以 <code>.visually-hidden文本供屏幕阅读器识别。
掌握这一模式后，你不仅能实现商品页跳转，还可延展至分类筛选、分页、搜索结果等所有依赖 ID 路由的动态功能。记住：安全始于输入验证，稳定源于结构规范，体验成于语义细节。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
