基于API响应控制表单提交：点击提交后页面自动刷新问题

原代码的核心问题是：onsubmit事件绑定的getResult函数没有等待异步的main()执行完成，直接返回了undefined，浏览器会默认触发表单提交，导致页面刷新。

修改步骤 #

1. 重构表单提交事件处理 #

将表单的onsubmit属性改为调用能处理异步逻辑的函数，先手动阻止默认提交行为：

<form accept-charset="UTF-8" class="myForm" id="myFormID" onsubmit="handleSubmit(event)">
  <button id="if-submit" type="submit">Submit</button>
</form>

2. 重写异步验证逻辑 #

简化嵌套函数，将验证逻辑改为明确的异步函数，确保所有分支都返回布尔值：

// 异步验证邮箱函数
async function validateEmail() {
  const emailAdd = document.getElementById('inf_field_Email').value;
  
  // 空邮箱判断
  if (!emailAdd) {
    console.log('Please put email address');
    return false;
  }

  try {
    // 调用API验证邮箱
    const response = await axios.get(server + emailAdd);
    const resultData = response.data;
    const form = document.getElementById('myFormID');

    if (resultData.status === 'valid') {
      form.action = "https://nextpage.com";
      return true;
    } else {
      return false;
    }
  } catch (error) {
    console.error('API请求失败:', error);
    return false;
  }
}

// 表单提交处理函数
async function handleSubmit(event) {
  // 阻止浏览器默认提交行为
  event.preventDefault();
  
  // 等待验证结果
  const canSubmit = await validateEmail();
  
  // 验证通过则手动提交表单
  if (canSubmit) {
    document.getElementById('myFormID').submit();
  }
}

关键说明 #

• 必须用event.preventDefault()先阻止默认提交，否则异步验证还未完成，浏览器就会触发页面刷新。
• 异步函数需要通过await获取结果，再根据结果决定是否手动提交表单。
• 原代码中嵌套的makeGetRequest可以直接用axios.get的Promise简化，无需额外包装Promise。

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