无法读取HTTP POST请求响应中的JSON属性问题求助

核心原因 #

• 响应未反序列化：XMLHttpRequest的response属性默认返回原始字符串格式，未经过JSON反序列化时无法直接通过对象属性的方式读取值。
• 结构层级错误：返回的JSON响应中，googleId字段嵌套在根节点的data属性下，并非直接挂载在响应根对象上，直接读取obj.googleId必然返回undefined。
• 回调逻辑不严谨：onreadystatechange触发时未校验readyState === 4的请求完成状态，可能在响应未完全返回时就执行取值逻辑。

修复步骤 #

1. 修正XHR回调逻辑 #

补充请求完成状态判断，同时对响应做JSON反序列化，也可以直接指定responseType让浏览器自动解析：

const postXHR = new XMLHttpRequest();
postXHR.open('POST', postOptions);
postXHR.setRequestHeader("Accept", "application/json");
postXHR.setRequestHeader("Content-Type", "application/json");
// 可选配置：指定响应类型为json，浏览器会自动将返回内容转为JS对象
postXHR.responseType = 'json';
postXHR.onreadystatechange = function() {
    // 仅在请求完全完成、且响应状态正常时执行逻辑
    if (postXHR.readyState === 4 && postXHR.status >= 200 && postXHR.status < 300) {
        // 若没有配置responseType = 'json'，需要手动反序列化：const response = JSON.parse(postXHR.response)
        const response = postXHR.response;
        console.log(postXHR.status);
        createNewOptionValues(response);
    }
}
postXHR.send('{"optionName":"optionName46", "platformName":"platformName46","dotDigitalId":3,"googleId":4}');

注：标准JSON对应的MIME类型是application/json，这里将请求头的text/json修正为标准值兼容性更好。

2. 修正属性读取层级 #

修改createNewOptionValues函数，从data属性下读取目标字段：

function createNewOptionValues(obj){
    console.log(obj.data.googleId);
    console.log(obj.data['googleId']);
}

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