如何用PHP与Ajax传递动态ID并无刷新展示商品详情

你的代码能通过$_GET['prId']拿到ID值，但写法不符合HTTP请求规范——你设置了type: 'POST'，却把参数拼在了URL的查询字符串里，虽然PHP会把URL参数存入$_GET数组，但这混淆了GET和POST请求的参数传递逻辑。下面是两种规范且可靠的实现方案：

方案一：改用GET请求（适合简单参数传递） #

直接将请求类型改为GET，URL拼接参数的方式就完全合理，$_GET['prId']的获取逻辑正确。

Ajax代码优化： #

<script> 
   $(document).ready(function() {
      $("div.item-link a").on("click", function(e) {
         e.preventDefault();
         // 用jQuery的data方法更简洁地获取data-id值
         const prId = $(this).data('id');
         $.ajax({
            type: 'GET', 
            url: "test.php?prId=" + prId, 
            success: function(data) {
               $("#prDetails").html(data);
            }
        });
     });
  });
</script>

test.php代码（含参数校验与API调用）： #

<?php
// 先校验参数是否存在，避免报错
$prId = isset($_GET['prId']) ? $_GET['prId'] : '';

if ($prId) {
    // 调用外部API获取商品详情，注意对ID做URL编码
    $apiUrl = "https://www.example.com/api/prDetails?prId=" . urlencode($prId);
    $productJson = file_get_contents($apiUrl);
    $productData = json_decode($productJson, true);

    // 渲染商品详情HTML（注意转义防止XSS）
    if ($productData) {
        echo "<h3>" . htmlspecialchars($productData['name']) . "</h3>";
        echo "<p>价格：" . htmlspecialchars($productData['price']) . "</p>";
        echo "<p>描述：" . htmlspecialchars($productData['description']) . "</p>";
    } else {
        echo "商品详情加载失败";
    }
} else {
    echo "请选择一个商品";
}
?>

方案二：保持POST请求，用请求体传递参数 #

如果需要用POST请求，应将参数放在data字段中，而非URL上，此时需用$_POST['prId']获取参数。

Ajax代码优化： #

<script> 
   $(document).ready(function() {
      $("div.item-link a").on("click", function(e) {
         e.preventDefault();
         const prId = $(this).data('id');
         $.ajax({
            type: 'POST', 
            url: "test.php",
            data: { prId: prId }, // 参数存入请求体
            success: function(data) {
               $("#prDetails").html(data);
            }
        });
     });
  });
</script>

test.php对应修改： #

只需将获取参数的方式改为$_POST即可：

<?php
$prId = isset($_POST['prId']) ? $_POST['prId'] : '';
// 后续API调用、HTML渲染逻辑与方案一一致
?>

额外优化建议 #

• 用$(this).data('id')替代e.currentTarget.dataset.id，jQuery的data方法会自动转换参数类型（比如数字ID转为Number类型），写法也更简洁。
• 调用外部API时，用urlencode()处理商品ID，避免特殊字符导致URL失效。
• 输出HTML内容时，用htmlspecialchars()转义特殊字符，防止XSS攻击。

内容的提问来源于stack exchange，提问作者Daniel Omara