如何防止$.ajax表单重复提交时发送多封邮件（含空邮件）？

这种情况我之前也碰到过，大概率是表单提交事件被重复绑定或者没有阻止原生表单的默认提交行为导致的双重提交。结合你有两个邮件表单的场景，给你几个针对性的排查和解决办法：

1. 检查事件绑定是否重复 #

如果你的JS代码是在页面加载、弹窗渲染或者AJAX回调里绑定表单的submit事件，要是这段绑定代码被执行了多次，就会导致每次提交时多个事件处理函数被触发：其中一个能正常拿到表单数据发送邮件，另一个可能因为绑定时机问题没获取到数据，就发了空邮件。

解决办法：绑定事件前先解除之前的绑定，避免重复绑定：

// jQuery 示例
$('#notify-form').off('submit').on('submit', function(e) {
  e.preventDefault(); // 先阻止原生表单提交
  // 拿到邮箱数据并校验
  const email = $('#email-notify').val().trim();
  if (!email) {
    alert('请输入有效的邮箱地址');
    return;
  }
  // 发送邮件的AJAX请求
  $.post('/你的邮件接口地址', {emailnotify: email}, function(response) {
    // 提交成功后重置表单
    $('#notify-form')[0].reset();
    alert('订阅成功！');
  });
});

如果用原生JS，可以用事件委托确保只绑定一次（避免重复绑定到表单本身）：

// 原生JS 示例，绑定到页面固定的父容器（比如body）
document.body.addEventListener('submit', function(e) {
  if (e.target.id !== 'notify-form') return; // 只处理目标表单
  e.preventDefault();
  const email = document.getElementById('email-notify').value.trim();
  if (!email) return;
  // 用FormData直接获取表单数据
  const formData = new FormData(e.target);
  fetch('/你的邮件接口地址', {
    method: 'POST',
    body: formData
  }).then(res => {
    if (res.ok) {
      e.target.reset(); // 重置表单
      alert('订阅成功！');
    }
  });
});

2. 必须阻止原生表单的默认提交行为 #

如果你的邮件发送是异步的（比如AJAX），但没阻止表单的原生提交，浏览器会同时执行AJAX请求和原生表单提交（跳转到action="#"也就是刷新页面）。第二次提交时，页面刷新后的表单状态可能异常，就会出现空邮件。

解决办法：在submit事件处理函数的第一行就调用e.preventDefault()，彻底阻止原生提交，不要依赖action="#"来阻止跳转。

3. 避免两个表单的事件冲突 #

你提到页面有两个邮件表单，千万别用$('form').on('submit', ...)这种全局绑定所有表单的写法！不然提交其中一个表单时，两个表单的事件都会被触发，另一个没填数据的表单就会发送空邮件。

解决办法：给每个表单设置唯一ID，分别绑定事件：

// 处理第一个表单 #notify-form
$('#notify-form').off('submit').on('submit', function(e) {
  e.preventDefault();
  // 该表单的发送逻辑
});

// 处理第二个表单（比如叫 #subscribe-form）
$('#subscribe-form').off('submit').on('submit', function(e) {
  e.preventDefault();
  // 第二个表单的发送逻辑
});

4. 提交成功后正确重置表单 #

提交后如果不重置表单，残留的状态可能影响下一次提交。在邮件发送成功的回调里，调用表单的reset()方法清空表单：

// jQuery 重置表单
$('#notify-form')[0].reset();
// 原生JS 重置表单
document.getElementById('notify-form').reset();

快速排查小技巧 #

1. 打开浏览器开发者工具（F12），切换到控制台，看看有没有报错信息；
2. 切换到网络标签，观察每次提交的请求数量：如果看到两个POST请求，说明确实是双重提交；
3. 检查你的JS代码，确认submit事件绑定的代码是不是被重复执行了（比如放在了会多次触发的函数里）。

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