jQuery表单提交时GET请求获结果并弹确认框的优雅实现方案

嘿，其实你之前觉得Promise没用可能是没找对打开方式！这个场景下，Promise（或者更简洁的async/await）恰恰能帮你写出最优雅的代码，完全不用折腾绑定/移除事件那一套。

首先得明确：默认的表单submit事件是同步触发的，而你要的是先异步GET数据，再弹出确认，最后决定是否提交——这就必须先阻止默认提交行为，等异步请求完成后再手动处理。

方案一：利用jQuery AJAX的Promise链式调用 #

jQuery的$.get本身就返回Promise对象，直接用.done()和.fail()就能优雅处理异步流程：

$('#form1').submit(function(e) {
  // 先阻止默认提交，不然表单会直接跳转，等不到异步结果
  e.preventDefault();
  const currentForm = this; // 保存当前表单的引用，后面要用来手动提交

  // 发起GET请求，拿到数据后再处理确认
  $.get('/your-api-endpoint')
    .done(function(messages) {
      const messageCount = messages.length; // 假设返回的是消息数组，取数量
      // 弹出确认框，根据用户选择决定是否提交
      if (confirm(`Confirm delete ${messageCount} ${messageCount === 1 ? 'message' : 'messages'}?`)) {
        currentForm.submit(); // 用户确认后，手动提交表单
      }
    })
    .fail(function() {
      // 处理请求失败的情况，比如给用户提示
      alert('Oops, failed to get message count. Please try again.');
    });
});

方案二：用async/await让代码更像同步逻辑 #

如果你的项目用的是jQuery 3.0+，它的AJAX方法返回的是标准Promise，这时用async/await会让代码可读性更高，看起来就像同步代码一样：

$('#form1').submit(async function(e) {
  e.preventDefault();
  const currentForm = this;

  try {
    // 等待GET请求完成，拿到数据
    const messages = await $.get('/your-api-endpoint');
    const messageCount = messages.length;
    
    // 弹出确认，确认后提交
    if (confirm(`Confirm delete ${messageCount} ${messageCount === 1 ? 'message' : 'messages'}?`)) {
      currentForm.submit();
    }
  } catch (error) {
    // 捕获请求失败的异常
    alert('Failed to fetch message data. Please check your network.');
  }
});

为什么这个方案比绑定/移除事件优雅？ #

1. 逻辑连贯：从阻止默认提交、异步请求、确认到最终提交，整个流程顺下来，代码一目了然，不用拆分到多个事件绑定里。
2. 无需额外状态管理：不用手动去绑定/解绑事件来防止重复提交，因为我们是在submit事件内部处理完所有逻辑后才决定是否提交。
3. 错误处理清晰：通过.fail()或者try/catch可以很方便地处理请求失败的情况，用户体验更友好。

之前的误区在于，你可能想直接在submit事件里同步拿到异步请求的结果，但这本来就做不到——Promise就是用来解决这种“先等异步操作完成，再执行后续逻辑”的场景，刚好完美匹配你的需求~

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