Ajax发送响应成功但PHP未接收到数据问题求助

问题根源分析 #

1. 事件绑定逻辑混乱：按钮本身通过onclick="Payment()"触发函数，而Payment()内部又循环给所有.purchase-button绑定点击事件，导致：
   • 第一次点击仅执行显示支付表单的逻辑，此时才完成事件绑定，不会触发AJAX请求；
   • 后续点击会触发多次重复的AJAX请求，逻辑完全混乱。
2. 数据发送时机错误：第一次点击按钮时，AJAX逻辑并未执行，后续重复绑定的事件会导致数据发送异常，最终PHP端无法正确接收。

修正方案 #

1. 调整HTML按钮代码

移除onclick属性，避免重复触发逻辑：

<button class="purchase-button" data-courses-id="<?php echo $coursesID; ?>">立即购买</button>

2. 重构JS代码

将事件监听放在页面加载完成后，直接绑定到按钮，合并显示表单与发送AJAX的逻辑：

// 页面加载完成后统一绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll(".purchase-button").forEach((button) => {
    button.addEventListener("click", (event) => {
      // 显示支付表单
      document.querySelector(".body-payment").style.display = "flex";
      document.body.style.overflow = "hidden";
      
      // 获取当前点击按钮的课程ID（使用dataset属性更规范）
      const courseID = button.dataset.coursesId;
      const data = { courseID: courseID };
      
      // 发送AJAX请求
      $.post("payment.php", data)
        .done(function (response) {
          console.log("数据发送成功:", data);
          console.log("PHP响应内容:", response);
        })
        .fail(function (error) {
          console.error("数据发送失败:", error);
        });
    });
  });
});

3. 验证PHP代码

先打印完整的$_POST数组排查接收情况，再处理业务逻辑：

<?php
// 先打印所有POST数据，确认是否接收成功
var_dump($_POST);

if (isset($_POST['courseID'])) {
    echo "成功接收课程ID: " . $_POST['courseID'];
} else {
    echo "Error: 未接收到courseID参数";
}
?>

额外排查步骤 #

1. 打开浏览器控制台的网络面板，查看POST请求的Form Data字段，确认courseID是否确实被发送；
2. 检查payment.php的文件路径是否正确，避免请求到错误的文件；
3. 若服务器开启CSRF防护，需在AJAX请求中携带对应的CSRF令牌（如有配置）。

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