如何让HTML表单同时执行两个Action操作？

嘿，我来帮你搞定这个表单双提交的需求～首先得明确一个关键点：HTML表单根本不支持写多个action属性，你代码里写的<form ... action="/testement" action="">是无效的，浏览器只会认第一个action值，第二个会直接被忽略，所以这种写法肯定达不到你想要的效果。

下面给你两种靠谱的实现思路，你可以根据自己的场景选：

方案一：前端用JavaScript触发双请求 #

这种方式适合你能修改前端代码的场景，核心思路是阻止表单的默认提交行为，然后手动发送两个POST请求，分别对应新的/testement和原来的当前页面（因为原来action为空时默认提交到当前URL）。

修改后的代码示例：

<form class="form" method="post" id="dualActionForm">
  <div class="row">
    <div class="col-md-6">{{display_field(form.point_cle)}}</div>
    <div class="col-md-6">
      <label class="control-label" for="commentaire">评论</label>
      <textarea name="the_comment" id="123soleil" class="form-control"></textarea>
      <input type="hidden" name="msr_id" value="{{msr.id}}">
    </div>
  </div>
  <button id="btn-{{pos.name}}" class="btn btn-{{pos.value.color}}" type="submit">{{pos.name}} - {{pos.value.action}}</button>
</form>

<script>
// 给表单绑定提交事件
document.getElementById('dualActionForm').addEventListener('submit', async function(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  // 收集表单里的所有数据
  const formData = new FormData(this);
  
  try {
    // 第一步：发送请求到新的action /testement
    await fetch('/testement', {
      method: 'POST',
      body: formData
    });
    
    // 第二步：发送请求到原来的目标（当前页面URL）
    await fetch(window.location.href, {
      method: 'POST',
      body: formData
    });
    
    // 两个请求都成功后的提示，你可以改成跳转或者其他逻辑
    alert('功能已执行完成！');
  } catch (error) {
    console.error('提交出错:', error);
    alert('提交失败，请刷新重试');
  }
});
</script>

注意事项： #

• 如果原来的表单提交后会有页面跳转，你可以在第二个请求完成后手动用window.location.href跳转；
• 要处理异步请求的错误，避免某个请求失败后用户不知情；
• 如果你用的是jQuery，也可以用$.ajax来替代fetch，逻辑是一样的。

方案二：后端统一处理转发 #

如果原有功能是后端逻辑，那更推荐这种方式——把表单的action直接设为/testement，然后在这个新接口的后端代码里，先处理你的新功能，再调用原来的表单处理逻辑（或者把请求转发到原来的接口）。

举个Python Flask的示例（其他后端语言逻辑类似）：

@app.route('/testement', methods=['POST'])
def handle_new_function():
    # 第一步：处理你的新功能逻辑
    # 比如获取表单数据、存储到新的数据库表等
    comment = request.form.get('the_comment')
    msr_id = request.form.get('msr_id')
    # ... 新功能代码 ...
    
    # 第二步：执行原来的表单逻辑
    # 直接调用原来处理表单的视图函数
    original_response = original_form_handler()
    
    # 返回原来的响应，或者自定义响应
    return original_response

这种方式的好处是前端几乎不用改，所有逻辑都在后端处理，更安全也更符合后端的职责划分。

最后再提醒一句 #

千万不要尝试在HTML里写多个action属性，这完全不符合HTML规范，浏览器只会解析第一个属性值，后面的都会被忽略，根本起不到双提交的作用。

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