使用jQuery AJAX与event.preventDefault()实现表单条件提交失败求助

我猜你大概率是遇到了事件绑定时机不对或者AJAX异步逻辑没处理到位的问题，下面帮你一步步排查并解决：

常见错误点及对应解决方法 #

1. 确保DOM加载完成后再绑定事件 #

如果你的JS代码是放在<head>标签里，或者在表单元素之前加载的，那绑定事件的时候DOM还没渲染完成，事件根本没绑定到表单上，自然阻止不了默认提交行为。

解决办法：把你的JS代码包裹在$(document).ready()里，或者把<script>标签放在页面底部</body>之前，确保DOM元素都加载完毕后再绑定事件。

示例代码：

$(document).ready(function() {
  // 在这里绑定表单提交事件
  $('#your-form-id').submit(function(e) {
    // 先立即阻止默认提交
    e.preventDefault();
    // 然后执行AJAX日期检查
    var selectedDate = $('#date-input').val();
    
    $.ajax({
      url: 'your-date-check-script.php',
      type: 'POST',
      data: { check_date: selectedDate },
      success: function(response) {
        // 假设PHP脚本返回纯文本"available"或"unavailable"
        if (response.trim() === 'available') {
          // 日期可用，手动提交表单
          $('#your-form-id')[0].submit();
        } else {
          // 日期不可用，给用户提示
          alert('这个日期已经被占用啦，请选其他日期！');
        }
      },
      error: function() {
        alert('检查日期时出错了，请稍后再试！');
      }
    });
  });
});

2. 注意AJAX的异步特性 #

AJAX默认是异步执行的，如果没先调用e.preventDefault()就发起请求，表单会直接跳过检查执行默认跳转。一定要先阻止默认行为，等AJAX返回结果后再决定是否提交表单。

3. 检查表单选择器是否正确 #

确认你绑定事件的表单选择器（比如$('#booking-form')）和HTML里的表单id/class完全一致，别写错字母或者大小写，不然事件绑定会失效。

4. 确保PHP脚本返回干净的响应 #

你的PHP脚本要返回明确、无多余内容的结果，比如纯文本的available或unavailable，不要输出多余的HTML标签、空格或者报错信息，否则AJAX回调里的判断会出错。

示例PHP代码（check-date.php）：

<?php
$checkDate = $_POST['check_date'];
// 这里写你的日期检查逻辑，比如查询数据库
$isAvailable = true; // 假设查询后得到的结果

if ($isAvailable) {
  echo 'available';
} else {
  echo 'unavailable';
}
?>

完整可运行示例 #

HTML部分 #

<form id="booking-form" action="test.html" method="post">
  <input type="date" name="booking-date" id="booking-date" required>
  <button type="submit">提交预订</button>
</form>

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

JS部分（your-script.js） #

$(document).ready(function() {
  $('#booking-form').on('submit', function(e) {
    // 立即阻止默认提交
    e.preventDefault();
    const form = this; // 保存表单实例，方便后续手动提交
    const selectedDate = $('#booking-date').val();

    if (!selectedDate) {
      alert('请先选择日期哦！');
      return;
    }

    $.ajax({
      url: 'check-date.php',
      method: 'POST',
      data: { check_date: selectedDate },
      dataType: 'text', // 指定返回类型为纯文本
      success: function(response) {
        if (response.trim() === 'available') {
          // 日期可用，手动触发表单提交
          form.submit();
        } else {
          alert('这个日期已经被预订了，换个日期试试吧！');
        }
      },
      error: function(xhr, status, error) {
        console.error('日期检查失败:', error);
        alert('系统出错了，请稍后再试！');
      }
    });
  });
});

额外小贴士 #

• 如果你用的是jQuery 3.x及以上版本，建议用.on('submit', function(){})代替.submit(function(){})，事件绑定更稳定。
• 记得在AJAX的error回调里处理异常情况，避免用户遇到问题却毫无感知。
• 如果前端和后端不在同一个域名下，需要在PHP脚本里配置CORS允许跨域请求。

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