使用POST方法的Ajax表单提交报错，点击提交后刷新数据如何修复

现有代码的核心问题 #

• 未确认jQuery依赖：代码使用了$相关jQuery语法，如果页面没有提前引入jQuery库，会直接报变量未定义错误
• form标签缺失action属性：虽然你在AJAX配置中硬编码了提交地址，但代码中定义了url = form.attr('action')却没有使用，属于冗余逻辑
• 缺少错误捕获逻辑：仅配置了success回调，请求报错时无法获取具体错误信息，很难定位问题
• 跨域请求未做后端适配：仅前端配置crossDomain: true无法解决跨域问题，需要目标接口配置正确的CORS响应头，否则会被浏览器跨域安全策略拦截
• 没有实现提交后的刷新逻辑：现有代码仅弹出返回结果，没有做表单重置、数据刷新的对应处理

修正后的完整代码 #

HTML 部分 #

<form name="form" id="form" class="form" action="https://www.harleymedic.co.uk/qrcodes/form.php">
  <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="text" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID"/>
      </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="text" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email"/>
      </div>
    </div>
  </div>
  <button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
</form>

JavaScript 部分 #

请确保页面已经提前引入jQuery库，否则$相关语法无法正常生效

$("#form").submit(function(e) {
  e.preventDefault();
  let form = $(this);
  // 直接读取form标签配置的action地址，避免硬编码耦合
  let submitUrl = form.attr('action');

  $.ajax({
    crossDomain: true,
    type: "POST",
    url: submitUrl,
    data: form.serialize(),
    success: function(res) {
      alert('提交成功，返回结果：' + res);
      // 提交成功后处理逻辑，按需开启
      // 1. 重置清空表单
      form[0].reset();
      // 2. 需要刷新整个页面则打开下面这行注释
      // location.reload();
      // 3. 如果是局部刷新页面数据，在这里编写对应DOM更新逻辑即可
    },
    error: function(xhr, status, error) {
      // 报错时控制台输出具体信息，方便排查
      console.error('提交失败', status, error);
      alert('提交失败，请稍后重试');
    }
  });
});

后端适配说明 #

如果仍然出现跨域报错，需要在目标接口form.php文件最开头添加以下CORS头配置：

// 线上环境建议将*替换为你自己的站点域名，降低安全风险
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

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