绑定表单提交的jQuery Ajax调用异常：无preventDefault时报错

为什么会出现这个情况？ #

核心原因是页面卸载中断了Ajax请求：

• 当你去掉event.preventDefault()，表单会触发默认的同步提交行为，浏览器会立刻开始卸载当前页面、跳转到表单指定的地址。
• 而你的Ajax是异步请求，还没等服务器返回响应，页面就被卸载了，浏览器直接终止了这个未完成的请求，所以xhr.responseText是undefined，控制台也会抛出错误。
• 至于global: false能抑制错误，是因为这个参数会禁用jQuery的全局Ajax事件（比如ajaxError），相当于把错误提示给屏蔽了，但请求被中断的本质问题并没有解决。

怎么解决？ #

分两种场景处理：

场景1：只需要Ajax提交（推荐）

直接保留event.preventDefault()，阻止表单的默认同步提交，完全用Ajax处理登录逻辑，请求完成后再手动跳转：

$('#system-login').on('submit', function(event) {
  event.preventDefault();
  const loginData = $(this).serialize();
  
  $.ajax({
    url: '/你的登录接口',
    method: 'POST',
    data: loginData,
    success: function(res) {
      // 登录成功后跳转
      window.location.href = '/dashboard';
    },
    error: function(xhr) {
      console.log('登录失败：', xhr.responseText || '未知错误');
    }
  });
});

场景2：必须同时执行Ajax和表单默认提交（不推荐）

如果确实有特殊需求要保留表单默认提交，得等Ajax请求完成后再触发提交：

$('#system-login').on('submit', function(event) {
  event.preventDefault(); // 先拦住默认提交
  const $form = $(this);
  
  $.ajax({
    url: '/你的接口',
    method: 'POST',
    data: $form.serialize(),
    complete: function() {
      // Ajax完成后，解绑当前submit事件再提交，避免循环触发
      $form.off('submit').submit();
    }
  });
});

⚠️ 别用async: false，会阻塞浏览器，导致页面假死，体验极差。

为什么别用global:false？ #

这只是个“掩耳盗铃”的办法——它只是不让全局错误事件触发，控制台看不到错误，但你的Ajax请求其实还是被中断了，根本没拿到完整响应。如果是日志、统计这类非核心操作还好，但如果是登录相关的关键逻辑，会导致数据丢失，绝对不推荐。

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