使用window.fetch能否实现表单的submit()提交功能？

嘿，这个问题我刚好研究过！其实window.fetch本身没法直接替代表单的submit()行为——因为表单提交会触发浏览器的页面跳转（或者在iframe里加载），而fetch是在后台悄悄发起AJAX请求，不会导致页面刷新或跳转。

不过，你可以用fetch模拟表单提交的核心逻辑，把要发的数据打包成符合要求的格式发出去，就像你之前用原生JS动态创建表单提交的需求，用fetch实现起来反而更简洁：

比如你原来的代码是动态创建表单再提交，换成fetch的话可以这么写：

// 模拟你要提交的表单数据，对应之前的hidden输入框
const formData = new FormData();
formData.append('height', 69);

// 用fetch发起POST请求，目标地址就是当前页面
fetch(window.location, {
  method: 'POST',
  body: formData,
  // 如果需要携带当前站点的cookie，记得加上这个参数
  credentials: 'include'
})
.then(response => {
  // 这里可以自定义请求成功后的处理逻辑
  if (response.ok) {
    console.log('提交成功啦！');
    // 要是需要跳转页面，在这里手动写 window.location.href = 目标地址 就行
  }
})
.catch(error => {
  console.error('提交出问题了:', error);
});

还有几个关键点要提醒你：

• 用fetch提交后，浏览器不会自动跳转页面，如果你需要跳转，得自己在响应成功的回调里手动处理
• 表单的submit()会自带浏览器默认行为，比如自动做表单验证、某些场景下自动携带cookie，这些fetch需要你手动配置，比如刚才代码里的credentials参数
• 如果后端期望接收传统表单格式的数据，用FormData就能自动匹配正确的请求头，不用自己费劲拼接参数字符串

简单说就是：fetch不能直接“复刻”表单submit()的全部浏览器默认行为，但能完美模拟它的数据提交逻辑，而且灵活性更高，完全能满足你动态提交数据的需求～

内容来源于stack exchange