原生JS Ajax发送数据返回null问题排查与解决

使用原生XMLHttpRequest发送POST请求时，调用httpc.send()发送数据，即使尝试用JSON.stringify()处理数据，后端返回结果始终为null，但改用jQuery的$.post()方法却能成功实现功能。排查后发现，问题出在前端未正确设置请求头，同时PHP端未处理JSON格式的请求体——jQuery会自动完成这些步骤，而原生XHR需要手动配置。

存在问题的原生JS代码 #

var data = {
    concat_operation: params
};
var httpc = new XMLHttpRequest();
var url = "calcul.php";

httpc.onreadystatechange = function() {
    if(httpc.readyState == 4 && httpc.status == 200) {
        console.log(httpc.response);
        var serverResponse = JSON.parse(httpc.responseText);
        console.log(serverResponse);
    }
};
httpc.open("POST", url, true);
console.log(data);
httpc.send(data);

问题核心：

• 未设置Content-Type请求头，后端无法识别请求体格式
• 直接发送JS对象而非JSON字符串，导致后端无法解析

可正常工作的jQuery代码 #

var data = {
    concat_operation: concat_number
};
$.post("calcul.php", data , function(response){
    var result = response.result;
    $('.parent').before(`<div class="result">${result}</div>`);
}, "json")

说明：jQuery的$.post()默认会将数据编码为application/x-www-form-urlencoded格式并自动设置对应请求头，后端可通过$_POST获取；指定"json"类型后，还会自动解析响应JSON。

解决后的完整代码 #

前端JS（修正请求头+JSON序列化）

function callPHP(params) {
    var httpc = new XMLHttpRequest();
    var url = "calcul.php";

    httpc.onreadystatechange = function() {
        if (httpc.readyState == 4 && httpc.status == 200) {
            console.log(httpc.response);
            var serverResponse = JSON.parse(httpc.responseText);
            console.log(serverResponse);
            console.log(serverResponse.result);
            var result = serverResponse.result;
            $('.parent').before(`<div class="result">${result}</div>`);
        }
    };
    httpc.open("POST", url, true);
    // 正确设置JSON格式请求头（修正原代码拼写错误）
    httpc.setRequestHeader('Content-Type', 'application/json');
    // 将数据序列化为JSON字符串发送
    httpc.send(JSON.stringify(params));
}

后端PHP（处理JSON请求体）

// 从php://input读取JSON格式请求体并解析
$data = json_decode(file_get_contents('php://input'), true);
$result = eval('return '.$data.';');
$arr_result = ["result" => $result];
// 返回JSON格式响应
echo json_encode($arr_result);

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