AJAX加入购物车代码无控制台报错 搭配PHP MySQL无法运行求助

• 核心错误为表单选择器不匹配：你在AJAX代码中使用$(this).closest(".form-submit")获取按钮所属表单，但给出的HTML里<form>标签未添加form-submit类，导致form变量拿到的是空jQuery对象，后续所有form.find()获取表单字段值的操作都返回undefined，逻辑直接中断。由于空jQuery对象执行方法不会抛出控制台报错，因此符合你说的无报错但点击无响应的现象。
• 你可以自行验证该问题：在点击事件的首行添加console.log(form)，点击按钮后查看控制台输出的是否为长度为0的jQuery对象，即可确认问题。

修复方案 #

你可以任选一种方式修复：

1. 修改HTML的form标签，添加对应类名：

<form class="form-submit">
    <input type="hidden" class="pid" value="<?php echo $row['product_id'] ?>">
    <input type="hidden" class="pname" value="<?php echo $row['product_name'] ?>">
    <input type="hidden" class="pprice" value="<?php echo $row['product_price'] ?>">
    <input type="hidden" class="pimage" value="<?php echo $row['product_image'] ?>">
    <input type="hidden" class="pcode" value="<?php echo $row['product_code'] ?>">
    <button id="addItem" class="btn add-to-cart">Add To Cart</button>
</form>

2. 修改AJAX代码中的选择器，直接匹配form标签：
   将代码中的var form = $(this).closest(".form-submit");替换为var form = $(this).closest("form");即可。

其他可选排查点 #

如果修复后仍有问题，可以检查以下项：

• 确认jQuery库在你的业务代码之前正确引入，引入顺序错误会导致代码不生效
• 如果页面上存在多个Add To Cart按钮，不要使用id#addItem绑定事件（id在同一页面必须唯一），可以将按钮的id改为class属性，同时将事件绑定代码改为$(document).on("click", ".addItem", function(e){...})，避免只有第一个按钮生效。

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