表单提交刷新页面导致JS脚本无法执行的问题

方案1：阻止默认提交行为，异步提交数据并执行脚本 #

这是最常用的解决方式，核心是先拦截表单的默认刷新行为，再通过异步请求提交数据，同时执行你的业务脚本。

示例代码：

// 获取表单元素
const form = document.querySelector('#your-form-id');

// 监听表单提交事件
form.addEventListener('submit', async function(e) {
  // 阻止页面刷新的默认行为
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  try {
    // 异步提交数据到后端（替换成你的接口地址）
    const response = await fetch('/your-submit-url', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      // 数据存储成功后，执行你的JS脚本
      runYourCustomScript();
      // 可选：提示用户提交成功
      alert('提交成功');
    } else {
      throw new Error('数据提交失败');
    }
  } catch (err) {
    console.error(err);
    alert('提交出错，请重试');
  }
});

// 你的自定义脚本函数
function runYourCustomScript() {
  // 这里写你要执行的逻辑
  console.log('自定义脚本执行中...');
}

方案2：利用onsubmit事件控制同步脚本执行顺序 #

如果你的脚本是同步逻辑，也可以在表单提交前先执行脚本，再允许默认提交（页面会刷新，但脚本已执行完毕），但这种方式不支持异步脚本。

示例代码：

<form onsubmit="return handleSubmit()" id="your-form-id">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script>
function handleSubmit() {
  // 先执行同步脚本
  runYourCustomScript();
  
  // 返回true允许表单默认提交（页面刷新）
  return true;
}

function runYourCustomScript() {
  console.log('同步脚本执行完成');
}
</script>

关键说明 #

• 方案1是最优解，既能避免页面刷新，又能保证数据正常存储，同时兼容异步脚本的执行。
• 若必须保留页面刷新的默认行为，仅适合同步且执行极快的脚本，否则存在脚本未完成就刷新页面的风险，不推荐。

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