使用XMLHttpRequest发起POST登录请求时PHP始终接收空参数

我之前也碰到过一模一样的情况——复用旧代码改完后POST参数离奇为空，排查下来大多是几个容易忽略的细节没处理好。结合你给出的代码片段，咱们一步步来定位问题：

1. 最容易漏掉的：未设置正确的Content-Type请求头 #

这是POST请求参数为空的头号元凶！如果你的后端是按表单格式解析参数，必须给XHR设置Content-Type: application/x-www-form-urlencoded，否则服务器根本不知道怎么解析你发过去的数据。旧代码里大概率有这一步，可能修改的时候不小心删了？

示例代码：

xmlhttp.open("POST", "你的登录接口地址", true);
// 这行必须加！别漏了
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2. 参数没有正确序列化 #

你已经获取了user和pw的值，但直接把变量丢给send()是不行的，得把它们转成服务器能识别的格式：

传统手动拼接（记得转义特殊字符）： #

// 用encodeURIComponent转义空格、&等特殊字符，避免参数截断
var params = "username=" + encodeURIComponent(user) + "&password=" + encodeURIComponent(pw);
xmlhttp.send(params);

现代浏览器更推荐的方式（自动处理编码）： #

用URLSearchParams来构建参数，省心又不容易出错：

var params = new URLSearchParams();
params.append('username', user);
params.append('password', pw);
xmlhttp.send(params);

3. 先确认DOM元素的值是否真的获取到了 #

有时候问题根本不在XHR上，而是你没拿到用户输入的值！可以加个调试日志看看：

console.log("用户名：", user, "密码：", pw);

如果控制台输出是空的，那得检查页面上的id="username"和id="password"元素是否存在，是不是input类型，有没有被禁用之类的。

整合后的完整示例代码 #

把这些要点整合起来，一个能正常工作的登录请求代码应该是这样的：

var user = document.getElementById("username").value;
var pw = document.getElementById("password").value;

if(user != "" && pw != "") {
    let xmlhttp;
    // 兼容不同浏览器
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // 处理服务器响应
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log("登录结果：", this.responseText);
            // 这里可以加登录成功后的跳转或提示逻辑
        }
    };
    
    xmlhttp.open("POST", "/login", true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
    // 构建并发送参数
    var params = new URLSearchParams();
    params.append('username', user);
    params.append('password', pw);
    xmlhttp.send(params);
}

另外，如果你的后端接口是接收JSON格式的参数，那要调整一下：

xmlhttp.setRequestHeader("Content-Type", "application/json");
var params = JSON.stringify({username: user, password: pw});
xmlhttp.send(params);

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