JavaScript POST请求提交数据为空 服务端收不到用户信息

你遇到的空对象问题不只是Content-Type配置错误，代码里存在多处语法、逻辑错误：

• DOM取值错误：document.getElementById() 要求传入字符串类型的元素ID，你传入的是未定义的变量，根本拿不到目标输入框；就算拿到DOM元素，你也没有读取.value属性，存入的是整个DOM节点对象，不是用户输入的内容。
• 语法错误：if 代码块缺少闭合大括号，JS解析阶段就会报错，代码根本无法按预期执行。
• 判断逻辑错误：你对比的是两个输入框DOM对象，不是用户输入的密码字符串，两个不同的DOM节点永远不可能相等，密码校验逻辑完全失效。
• 序列化错误：FormData 是特殊的键值对对象，没有可枚举的普通对象属性，直接把FormData塞进普通对象做JSON.stringify()，序列化结果必然是空对象。
• 请求头配置错误：如果使用FormData传参，绝对不要手动设置Content-Type请求头，XHR会自动生成带boundary分隔符的multipart/form-data请求头，你手动改成application/json会导致后端无法正确解析参数边界；如果后端要求传JSON格式参数，根本不需要用FormData，直接构造普通JS对象即可。

根据后端接口要求的参数格式二选一即可。

方案1：使用FormData传参（适合后续需要扩展文件上传的场景） #

function formValidation(){
    // 正确获取输入值
    var userid = document.getElementById('usuario').value.trim();
    var usermail = document.getElementById('correo').value.trim();
    var userpassword = document.getElementById('contrasena').value;
    var userpasswordconfirm = document.getElementById('contrasena_conf').value;
    
    // 对比密码字符串
    if (userpassword === userpasswordconfirm){
        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append("Users", userid);
        formData.append("Mail", usermail);
        formData.append("pwd", userpassword);
        
        xhr.open("POST", URL, true);
        // 不要手动设置Content-Type，由XHR自动生成
        xhr.send(formData);
        
        // 可按需添加请求回调
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 注册成功后的业务逻辑
            }
        }
    } else {
        window.alert("Las contraseñas no coinciden");
        document.getElementById('contrasena').focus();
        return false;
    }
}

方案2：使用JSON格式传参 #

function formValidation(){
    var userid = document.getElementById('usuario').value.trim();
    var usermail = document.getElementById('correo').value.trim();
    var userpassword = document.getElementById('contrasena').value;
    var userpasswordconfirm = document.getElementById('contrasena_conf').value;
    
    if (userpassword === userpasswordconfirm){
        var xhr = new XMLHttpRequest();
        // 直接构造普通JS对象，不需要FormData
        var requestData = {
            Users: userid,
            Mail: usermail,
            pwd: userpassword
        };
        
        xhr.open("POST", URL, true);
        // 传JSON时再设置对应Content-Type
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(requestData));
        
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 注册成功后的业务逻辑
            }
        }
    } else {
        window.alert("Las contraseñas no coinciden");
        document.getElementById('contrasena').focus();
        return false;
    }
}

补充说明：原代码中连续调用两个输入框的focus()方法，实际只有最后一次调用会生效，建议只保留一个聚焦逻辑即可。

内容的提问来源于stack exchange，提问作者Martín