使用JavaScript的FormData()提交表单，为何浏览器无法正确显示HTML响应？

这是个非常常见的问题，咱先搞明白两种提交方式的本质区别，你就懂为啥会这样了：

方式1：原生表单submit的工作逻辑 #

当你调用document.form1.submit()时，触发的是浏览器原生的表单提交行为：

• 浏览器会直接发起POST请求到目标地址
• 请求完成后，浏览器会自动把服务器返回的HTML内容替换掉当前页面的全部内容（相当于页面刷新并加载新内容）
• 这是浏览器内置的默认行为，所以你能直接看到返回的HTML

方式2：FormData异步提交的问题所在 #

用FormData()提交表单，你大概率是通过fetch API或者XMLHttpRequest（XHR）来发起请求的（你没贴具体代码，但几乎都是这个场景），这种方式属于异步HTTP请求：

• 浏览器只是帮你把数据发出去，然后把服务器返回的响应数据交给JavaScript代码处理，不会自动触发页面导航或内容替换
• 如果你的代码里没有写处理响应的逻辑，那返回的HTML就只是存在内存里，根本不会被渲染到页面上，自然看不到效果

解决办法：手动处理响应并渲染HTML #

如果想让浏览器显示服务器返回的HTML，你需要在异步请求的回调里手动处理响应内容，举两个常见的例子：

示例1：用fetch API替换当前页面内容 #

// 获取表单元素
const form = document.querySelector('form[name="form1"]');
// 创建FormData对象
const formData = new FormData(form);

// 发起异步POST请求
fetch(form.action, {
  method: form.method,
  body: formData
})
.then(response => {
  // 先确认响应成功
  if (!response.ok) {
    throw new Error('请求失败');
  }
  // 把响应转为HTML文本
  return response.text();
})
.then(htmlContent => {
  // 替换当前页面的全部内容
  document.documentElement.innerHTML = htmlContent;
})
.catch(error => {
  console.error('提交出错啦:', error);
});

示例2：打开新页面显示返回的HTML #

const form = document.querySelector('form[name="form1"]');
const formData = new FormData(form);

fetch(form.action, {
  method: form.method,
  body: formData
})
.then(response => response.text())
.then(htmlContent => {
  // 打开新窗口并写入HTML
  const newWindow = window.open();
  newWindow.document.write(htmlContent);
  newWindow.document.close();
})
.catch(error => console.error('提交出错:', error));

简单总结：原生submit是浏览器帮你搞定了「请求+渲染」全流程，而FormData异步提交只做了「请求」这一步，剩下的「渲染」得你自己用JavaScript写代码实现～

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