jQuery AJAX实现表单POST提交数据到后端运行异常问题求助

1. 核心逻辑错误：校验逻辑完全失效 #

你当前的字段校验代码存在低级语法问题：每完成一个字段的非空判断后，都会无条件将isOk设为false，最终isOk永远为假，AJAX请求永远不会触发。同时你遗漏了对必填下拉框theme的校验，不符合表单必填规则。

2. 请求逻辑错误：未携带表单数据 #

POST请求没有传递任何表单字段参数，后端无法接收处理提交内容，必然会返回错误。

3. 事件绑定不规范 #

绑定提交按钮的点击事件，无法覆盖用户回车提交表单的场景，直接绑定表单的submit事件适配性更好。

修正后的完整JS代码 #

// 绑定表单submit事件，覆盖所有提交场景
$("#sendMessage").on("submit", function(e) {
  e.preventDefault();
  let isOk = true;

  // 逐个校验必填字段，只要有一个为空就标记校验不通过
  const name = $("#sendMessage .name").val().trim();
  if (!name) isOk = false;

  const email = $("#sendMessage .email").val().trim();
  if (!email) isOk = false;

  const phoneNumber = $("#sendMessage .phone-number").val().trim();
  if (!phoneNumber) isOk = false;

  const country = $("#sendMessage .country").val().trim();
  if (!country) isOk = false;

  // 补充下拉框校验
  const theme = $("#sendMessage select[name='theme']").val().trim();
  if (!theme) isOk = false;

  const textBody = $("#sendMessage .textBody").val().trim();
  if (!textBody) isOk = false;

  if (isOk) {
    // 序列化表单自动获取所有字段数据，无需手动拼接
    const formData = $(this).serialize();
    $.ajax({
      url: "api/Guest/SendEmailForContact",
      method: "POST",
      data: formData, // 携带表单提交数据
      xhrFields: {
        withCredentials: true
      },
      statusCode: {
        404: function () {
          alert("请求接口不存在");
        }
      }
    }).done(function () {
      console.log("提交成功");
      // 可选：提交成功后重置表单
      $("#sendMessage")[0].reset();
    }).fail(function (err) {
      // 新增错误捕获方便后续排查问题
      console.error("提交失败", err);
    });
  }
});

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