HTML/JavaScript如何通过单个按钮提交多个POST请求并在新标签页打开结果

你已经完成了目标行的筛选，直接对每一行的表单调用原生提交方法即可，完全复用你现有单按钮的提交逻辑，不需要额外调整接口参数配置：

方案1：直接复用现有表单（最简便） #

你原有的每行表单已经配置了target="_blank"、提交地址和隐藏参数，只需要在Unlink All by Artist的点击事件中遍历筛选到的行，触发表单提交即可：

// 绑定全量Unlink按钮的点击事件
document.querySelector('#unlink-all-by-artist').addEventListener('click', function() {
  // 替换为你已实现的筛选逻辑，拿到所有目标行的表单元素集合
  const targetForms = 你的筛选结果;

  // 遍历提交每个表单，会自动在独立新标签页打开请求结果
  Array.from(targetForms).forEach(form => {
    form.submit();
  });
});

方案2：动态生成表单提交（不依赖原有表单结构） #

如果你不想直接操作原有表单，也可以临时创建表单提交，效果和原有按钮完全一致：

// 封装POST请求新标签页打开的工具方法
function postToNewTab(action, paramMap) {
  const tempForm = document.createElement('form');
  tempForm.method = 'POST';
  tempForm.action = action;
  tempForm.target = '_blank';
  tempForm.style.display = 'none';

  // 批量注入参数
  Object.entries(paramMap).forEach(([paramName, paramValue]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = paramName;
    input.value = paramValue;
    tempForm.appendChild(input);
  });

  document.body.appendChild(tempForm);
  tempForm.submit();
  // 提交后立即移除临时表单，不影响页面结构
  document.body.removeChild(tempForm);
}

// 点击全量Unlink按钮时调用
document.querySelector('#unlink-all-by-artist').addEventListener('click', function() {
  // 替换为你已实现的筛选逻辑，拿到所有目标行元素集合
  const targetRows = 你的筛选结果;

  Array.from(targetRows).forEach(row => {
    // 从行内读取对应参数
    const params = {
      state: row.querySelector('input[name="state"]').value,
      track_id: row.querySelector('input[name="track_id"]').value,
      mbid: row.querySelector('input[name="mbid"]').value
    };
    // 调用工具方法提交
    postToNewTab('https://acoustid.org/edit/toggle-track-mbid', params);
  });
});

注意事项 #

• 浏览器默认会拦截非用户主动触发的弹窗，所有提交逻辑必须放在按钮点击的同步回调中执行，不要放在setTimeout、异步请求回调等异步逻辑里，否则会被判定为恶意弹窗拦截。
• 多数浏览器默认会限制单次交互打开的新标签页数量，一般超过3个就会触发拦截，你可以提前提示用户手动允许本网站的弹窗权限，即可正常打开所有请求结果页。

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