XMLHttpRequest指定POST方式却发送GET请求的问题求助

咱们一步步拆解你遇到的问题，我之前也碰到过类似的表单提交混乱的情况，很能理解你的困惑！

1. 初始POST请求的格式矛盾（次要但需修正） #

先看你写的submit_function，这里有个小矛盾点：你手动设置了Content-Type: application/x-www-form-urlencoded，但同时用FormData对象发送数据。

• 当使用FormData时，浏览器会自动帮你设置正确的Content-Type: multipart/form-data并处理数据编码，手动覆盖成x-www-form-urlencoded会导致服务器无法解析FormData格式的数据。
• 如果你的后端确实期望接收x-www-form-urlencoded格式，需要把FormData转换成键值对字符串再发送：

function submit_function(event){
  event.preventDefault();
  var req = new XMLHttpRequest();
  var fd = new FormData();
  fd.append("username", "username");
  fd.append("password", "password");
  // 转换成urlencoded格式的字符串
  var encodedData = new URLSearchParams(fd).toString();
  req.open("POST", "/auth/login", true);
  req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  req.send(encodedData);
  return false;
}

如果不需要指定x-www-form-urlencoded，直接删掉setRequestHeader那一行，让浏览器自动处理FormData的编码和请求头即可。

2. 嵌套表单的核心干扰（导致GET请求的根源） #

你后续发现的表单绑定代码，暴露了一个关键问题：HTML规范里不允许嵌套<form>标签！浏览器遇到嵌套表单时，会自动篡改DOM结构（比如把内部表单移到外部表单外面），这直接导致你的事件绑定和提交行为彻底混乱。

当你给外部表单绑定onsubmit事件后，哪怕你在submit_function里调用了event.preventDefault()，但由于DOM结构被浏览器修正，实际触发的可能是外部表单的默认提交行为——而表单默认的请求方法是GET，这就是服务器收到无数据GET请求的原因！

解决办法： #

• 彻底移除嵌套表单结构：把内部的表单元素直接放到外部表单中，或者删掉多余的表单标签，只保留一个合法的表单结构。
• 确保全程阻止默认行为：如果需要保留单个表单的提交绑定，一定要在onsubmit回调里也阻止默认行为：

document.getElementById("formid").onsubmit = function(e){
  e.preventDefault(); // 阻止表单默认的GET提交
  submit_function(e);
}

这样就能避免表单的默认请求覆盖你自己发送的POST请求了。

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