外部注入表单提交后，如何确保页面仅在提交成功后刷新？

问题根源 #

你的代码在表单submit事件触发后立即调用location.reload()，这会直接终止当前页面的所有网络请求（包括表单提交请求），导致数据还没传到服务器就被中断，自然无法保存。

优化方案 #

1. 用MutationObserver替代setTimeout，可靠监听表单注入 #

硬编码的setTimeout(1000)不可靠——表单可能提前加载完成，也可能超过1秒才加载，改用MutationObserver可以在表单被注入DOM时立即触发监听逻辑：

_birthdayRefresh() {
  const birthdayActionButton = document.querySelector(".lion-rule-item--birthday .lion-action-button");
  birthdayActionButton.addEventListener("click", () => {
    // 监听body或表单的父元素（可根据实际DOM结构调整监听目标）
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        const birthdayForm = document.querySelector("form.lion-birthday-entry-form");
        if (birthdayForm) {
          // 找到表单后停止监听，避免重复触发
          observer.disconnect();
          // 绑定提交处理逻辑
          this._handleBirthdayFormSubmit(birthdayForm);
        }
      });
    });

    // 配置监听选项：监听子节点新增，包含子树
    observer.observe(document.body, { childList: true, subtree: true });
  });
}

2. 分场景处理表单提交，确保成功后再刷新 #

根据表单的提交方式，选择对应的处理逻辑：

场景A：原生表单提交（同步POST/GET请求）

阻止默认跳转行为，手动提交表单并监听请求完成：

_handleBirthdayFormSubmit(form) {
  form.addEventListener("submit", (e) => {
    // 阻止默认跳转，避免页面提前刷新
    e.preventDefault();
    // 构建表单数据，保持与原生提交一致
    const formData = new FormData(form);
    // 用fetch发送提交请求
    fetch(form.action, {
      method: form.method,
      body: formData,
      credentials: "include" // 保持会话状态，和原生提交逻辑一致
    })
    .then(response => {
      if (response.ok) {
        // 确认请求成功后再刷新页面
        location.reload();
      } else {
        console.error("表单提交失败，请重试");
      }
    })
    .catch(error => {
      console.error("提交请求出错:", error);
    });
  });
}

场景B：外部应用用AJAX异步提交表单

如果外部应用是通过AJAX（XHR/fetch）提交表单，通常会有自定义事件或状态信号。可以尝试监听自定义成功事件，或拦截请求判断完成状态：

_handleBirthdayFormSubmit(form) {
  // 假设外部应用在提交成功后会触发自定义事件"birthday-submit-success"
  form.addEventListener("birthday-submit-success", () => {
    location.reload();
  });

  // 备选方案：拦截XHR请求，判断是否为目标表单的提交请求
  const originalOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url) {
    if (url === form.action && method === form.method) {
      this.addEventListener("load", () => {
        if (this.status >= 200 && this.status < 300) {
          location.reload();
          // 恢复原始open方法，避免影响其他请求
          XMLHttpRequest.prototype.open = originalOpen;
        }
      });
    }
    return originalOpen.apply(this, arguments);
  };
}

额外提示 #

• 可通过浏览器开发者工具的Network面板，查看表单提交的请求类型（原生跳转/AJAX），针对性选择处理逻辑。
• 如果按钮可能被多次点击，需确保表单的提交事件仅绑定一次，避免重复触发刷新。

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