如何实现AJAX提交POST数据并在新标签页打开目标页面？

其实AJAX本身就是后台静默请求的机制，它不会触发浏览器打开新标签页——不过我们可以换个思路，通过动态创建表单并提交的方式，完美模拟设置了target="_blank"的表单POST提交效果，最终在新标签页打开携带POST数据的test.php页面。

具体实现代码 #

我们可以封装一个通用函数，用来处理这种需求：

function postToNewTab(targetUrl, formData) {
  // 创建一个隐藏的表单元素
  const tempForm = document.createElement('form');
  tempForm.action = targetUrl;
  tempForm.method = 'POST';
  tempForm.target = '_blank'; // 核心：指定在新标签页打开响应页面
  tempForm.style.display = 'none'; // 隐藏表单，避免干扰页面

  // 将FormData中的所有键值对转化为隐藏input元素，添加到表单中
  for (const [key, value] of formData.entries()) {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = value;
    tempForm.appendChild(input);
  }

  // 把表单挂载到页面、提交、然后移除（避免冗余DOM）
  document.body.appendChild(tempForm);
  tempForm.submit();
  document.body.removeChild(tempForm);
}

怎么使用这个函数？ #

比如你已经构造好了FormData，直接调用函数即可：

// 构造需要提交的FormData
const myFormData = new FormData();
myFormData.append('name', 'Daniel');
myFormData.append('age', 30);
// 如果需要上传文件，也支持：myFormData.append('avatar', fileInput.files[0]);

// 发起请求，在新标签页打开test.php
postToNewTab('test.php', myFormData);

一些注意事项 #

• 这种方式和原生表单提交的行为完全一致，支持所有POST数据类型（包括文件上传）
• 跨域规则和表单提交相同，不会有AJAX的跨域限制问题
• 提交后新标签页会直接加载test.php的响应内容，和设置了target="_blank"的表单体验完全一样

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