一个表单无法提交两个POST请求，必须用JavaScript通过fetch并行或串行发起两次请求；并行适用于独立接口，串行适用于有依赖关系的场景。
用一个表单提交两个 POST 请求？不行，得换思路
浏览器原生表单每次提交只触发一次 HTTP POST，不可能“一个表单发两个 POST”。所谓“提交两个 POST”，实际是两种常见需求：要么向两个不同接口分别发请求，要么在一次用户操作中先后/并行调用两个后端接口。必须用 JavaScript 主动发起，不能靠 <form></form> 默认行为。
用 fetch 同时发两个 POST（推荐）
现代前端最直接的方式：用 fetch 并行发出两个请求。适合两个接口彼此独立、无依赖关系的场景，比如同时上报日志 + 提交表单数据。
注意点：
-
fetch默认不带 cookie，如需鉴权，得加credentials: 'include' - 两个请求失败互不影响，得各自处理
catch或检查response.ok - 别忘了设置
Content-Type: application/json（如果传 JSON）
示例：
立即学习“前端免费学习笔记（深入）”；
fetch('/api/log', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'click' })
}).then(r => r.json());
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Alice' })
}).then(r => r.json());
用 fetch 串行发两个 POST（有依赖时）
第二个请求依赖第一个响应结果（比如先获取 token，再用它提交），就得等第一个完成后再发第二个。用 await 最清晰，避免嵌套 then。
容易踩的坑：
- 没用
try/catch包裹，第一个失败会导致整个链路中断且无提示 - 忘记在第二个请求的
headers中带上第一个返回的 token 或字段 - 误以为
await Promise.all([p1, p2])是串行——它其实是并行
简写示意：
const res1 = await fetch('/api/token', { method: 'POST' });
const { token } = await res1.json();
const res2 = await fetch('/api/data', {
method: 'POST',
headers: { Authorization: `Bearer ${token}` },
body: JSON.stringify({ x: 1 })
});
避免用 form + target="_blank" 伪装两个 POST
有人试图用两个 <form target="_blank"></form> + submit() 触发两个新窗口 POST，这方法问题很多：
- 多数浏览器会拦截弹窗，尤其移动端基本失效
- 无法获知任一请求是否成功，也没法读响应体
- 违反同源策略时，新开页根本拿不到响应结果
- SEO 和可访问性全崩，不是真正意义上的“提交两个 POST”
真要兼容极老环境（比如 IE9），也该用 XMLHttpRequest 而不是赌弹窗。
关键就一点：POST 是动作，不是配置。两次动作，就得有两次明确的发起逻辑。别指望 HTML 表单自动帮你拆分或复制请求——它连重试都要你手动控制。
