jQuery AJAX中event.preventDefault()无法阻止PHP表单提交的原因排查

嘿，我看了你的代码，问题主要出在AJAX的写法有语法错误，另外还要排查下jQuery是否正确引入了，具体来说：

核心问题：AJAX代码的语法错误 #

你现在的代码里，写完formData之后直接就写type : "GET"这类配置项，这完全不符合jQuery AJAX的语法规范——这些配置项必须包裹在$.ajax({ ... })的对象参数里，而且你把.done()绑定在了submit事件处理函数上，而不是AJAX请求对象上，这就导致脚本执行时会抛出语法错误，浏览器可能因为这个错误中断脚本执行，哪怕event.preventDefault()写在前面，也可能因为后续的错误影响事件阻止的效果（或者更糟，整个事件处理函数根本没正确绑定）。

修正后的完整代码 #

我帮你把代码改对了，你可以直接用：

$(document).ready(function() {
  $("#form_add_to_cart").submit(function(event) {
    // 先阻止默认提交行为，这一步没问题，但要确保后续代码不报错
    event.preventDefault();
    
    // 获取表单数据
    var formData = {
      'product_id' : $('input[name=product_id]').val(),
      'quantity' : $('input[name=quantity]').val()
    };
    
    // 正确调用jQuery AJAX，把所有配置项放在$.ajax的参数对象里
    $.ajax({
      type : "GET",
      url : "include/ajax_add_to_cart.php", // 这里和form的action路径保持一致，避免路径错误
      data : formData,
      dataType : "json",
      encode : true
    }).done(function(data) {
      // 成功回调
      console.log(data);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      // 建议加上错误处理，方便调试
      console.error("AJAX请求失败：", textStatus, errorThrown);
    });
  });
});

还要排查这两个点 #

1. 是否正确引入了jQuery？
   如果你的页面里没有先加载jQuery库，那所有jQuery语法都不会生效，事件处理函数根本没绑定，表单自然会默认提交。你需要在自己的脚本之前添加jQuery的引用，比如：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   

2. 检查浏览器控制台的报错
   按下F12打开开发者工具，切换到Console标签，看看有没有红色的语法错误提示，这是排查这类问题最快的方式。

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