一个表单无法提交两个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。
华美卷皮淘宝客-自动生成商品HTML插件是一个可以让卷皮淘宝客软件自动生成各个商品的html页面的软件。安装说明:1、打开“华美淘宝客卷皮版”后台,找到菜单: 工具--》数据库管理--》升级数据库,然后将sql.txt里面的代码复制进去,提交。2、打开后台,找到:系统设置--》核心设置--》SEO设置,在“URL静态化&rdquo
容易踩的坑:
- 没用
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 表单自动帮你拆分或复制请求——它连重试都要你手动控制。









