AJAX表单提交功能异常，如何修改代码使其正常发送POST请求？

代码问题及修正方案 #

现有代码错误点 #

• 提交事件绑定错误：$("submit")不是合法的元素选择器，无法绑定到提交按钮的点击事件，且没有阻止表单默认提交行为，会导致页面直接刷新跳转
• 表单校验逻辑无效：form.val()中form变量未定义，且.val()方法仅适用于单个输入元素，不能用于判断整个表单是否有值
• 接口地址配置错误：实际请求地址和要求提交的目标地址不一致
• 缺少返回数据类型声明：如果后端返回JSON格式数据，未声明dataType可能会导致数据解析失败

修正后完整代码 #

<form method="POST" id="form" action="#" class="form">     
      <div class="field">
        <label for="input-kitId" class="label is-size-7 has-text-weight-light has-text-left">Order ID</label>
        <div class="field"><div class="control is-expanded">
          <input type="number" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID" required>
          </div>
        </div>
      </div>
      
      <div class="field">
        <label for="input-firstName" class="label is-size-7 has-text-weight-light has-text-left">Email</label>
        <div class="field"><div class="control is-expanded">
          <input type="email" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email" required>
          </div>
        </div>
      </div>
      
      <button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
    </form>
    
    
  </div>
</div>
    
   
<!-- 请确保页面已提前引入jQuery库，未引入的话请自行在本地引入对应版本即可 -->
<script>
// 监听表单的submit事件，而非按钮点击事件，兼容性更好
$("#form").on("submit", function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  // 简单校验两个字段非空，可根据需求调整
  const kitId = $("#input-kitId").val().trim();
  const email = $("#input-firstName").val().trim();
  if(kitId && email) {
    const msg = $(this).serialize();
    $.ajax({
      type: 'POST',
      // 替换为要求的接口地址
      url: 'https://www.eymedic.form.php',
      data: msg,
      // 若后端返回JSON格式需加该行
      dataType: 'json',
      success: function(data) {
        console.log(data);
        if (data.status === 'OK') {
          window.location.href='second_page.html'
        } else {
          alert(data.message)
        }
      },
      error: function(xhr, err) {
        console.error('请求失败：', err)
        alert('提交失败，请稍后重试')
      }
    });
  } else {
    alert('请填写完整的Order ID和邮箱信息')
  }
});
</script>

额外调整说明 #

• 给输入框添加了required属性，浏览器会自带基础必填校验
• 新增了请求失败的回调处理，避免出错时无任何提示
• 调整为监听表单的submit事件，覆盖回车提交等所有表单提交场景，兼容性优于绑定按钮点击事件

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