如何先后将表单提交至两个不同URL？现有实现的问题与优化咨询

嘿，我来帮你梳理下当前遇到的问题～首先得说，你现在的代码虽然能运行，但确实存在一些潜在的问题，咱们一步步来解决：

一、当前多次同步提交的问题 #

你现在连续调用两次form.submit()的同步提交方式，会让浏览器陷入混乱：

• 浏览器可能只会响应最后一次提交请求，或者出现请求顺序错乱的竞态条件（比如执行请求比保存请求先到达服务器），虽然目前能正常运行，但在网络波动或服务器响应慢的情况下很容易出问题。
• 页面URL变化正是因为最后一次提交是同步跳转到了/execute地址，浏览器会自动加载这个URL的返回内容。

二、推荐优化方案：AJAX异步提交（彻底解决问题） #

因为你提到可以用jQuery，那用AJAX异步提交是最优解——既不会导致页面跳转，还能严格保证请求顺序，同时能给用户更友好的反馈。

步骤1：修改按钮类型 #

先把「Save and Execute」按钮的type从submit改成button，避免触发表单的默认提交行为：

<form method="post" action="/settings/{{id}}/save">
  <!-- 你的输入字段 -->
  <button type="submit">Save</button>
  <button type="button" onclick="saveAndExecute(this)">Save and Execute</button>
</form>

步骤2：重写saveAndExecute函数 #

用jQuery的$.ajax依次发起保存和执行请求，确保先完成保存再执行设置：

function saveAndExecute(button) {
  const $btn = $(button);
  const $form = $btn.closest("form");
  
  // 点击后禁用按钮，避免重复提交
  $btn.prop("disabled", true).text("Processing...");

  // 第一步：提交保存请求
  $.ajax({
    url: $form.attr("action"),
    method: $form.attr("method"),
    data: $form.serialize(), // 序列化表单数据
    success: function() {
      // 保存成功后，发起执行请求
      $.ajax({
        url: "/settings/{{id}}/execute",
        method: $form.attr("method"),
        data: $form.serialize(),
        success: function() {
          alert("保存并执行成功！");
        },
        error: function() {
          alert("执行设置失败，请重试");
        },
        complete: function() {
          // 请求完成后恢复按钮状态
          $btn.prop("disabled", false).text("Save and Execute");
        }
      });
    },
    error: function() {
      alert("保存设置失败，请重试");
      // 保存失败也要恢复按钮状态
      $btn.prop("disabled", false).text("Save and Execute");
    }
  });
}

为什么这个方案更好？ #

• 无页面跳转：异步请求不会改变当前页面的URL，完美解决你提到的URL变化问题。
• 请求顺序可控：只有保存请求成功后才会发起执行请求，避免了服务器端的顺序错乱。
• 友好的用户反馈：可以分别处理保存/执行的成功或失败情况，还能添加按钮加载状态，防止重复点击。

三、备选方案：用隐藏iframe提交（不推荐） #

如果因为某些原因不能用AJAX，也可以用隐藏iframe来承载其中一次提交，避免页面跳转：

<form method="post" action="/settings/{{id}}/save">
  <!-- 你的输入字段 -->
  <button type="submit">Save</button>
  <button type="submit" onclick="saveAndExecute(this)">Save and Execute</button>
  <!-- 添加隐藏iframe -->
  <iframe name="hiddenSubmitFrame" style="display: none;"></iframe>
</form>

function saveAndExecute(button) {
  const form = button.closest("form");
  
  // 先通过隐藏iframe提交保存请求
  form.target = "hiddenSubmitFrame";
  form.submit();
  
  // 等待一小段时间（不可靠，不推荐），再修改action提交执行请求
  setTimeout(() => {
    form.target = "_self"; // 改回当前窗口
    form.action = "/settings/{{id}}/execute";
    form.submit();
    // 恢复原始action
    form.action = "/settings/{{id}}/save";
  }, 500);
}

⚠️ 注意：这个方案的可靠性很差，因为等待时间是硬编码的，网络慢的时候保存请求还没完成就会发起执行请求，所以只作为应急备选。

最后补充 #

如果你的服务器端接口支持，也可以把「保存并执行」合并成一个接口（比如/settings/{{id}}/save-and-execute），这样只需要一次提交就能完成两个操作，这是更简洁的后端方案，不过这需要后端配合修改。

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