如何访问从 AJAX 请求返回的 JSON 数据？答案

【问题标题】：How do I access JSON data returned from an AJAX request?如何访问从 AJAX 请求返回的 JSON 数据？
【发布时间】：2021-07-18 12:08:39
【问题描述】：

我有一个 JavaScript 函数，它从 AJAX 调用接收数据到服务器。

function dataReceiver() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        // Everything is good, the response was received.
        if (httpRequest.status === 200) {
            //console.log( JSON.parse(this.responseText) );
            let data = JSON.parse(this.responseText);
            console.log("1) " + data["key1"]);
            console.log("2) " + data['key1']);
            console.log("3) " + data.key1);

        } else {
            // There was a problem with the request.
            alert("Error: HTTP request status " + httpRequest.status);
        }
    } else {
        // Not ready yet.
        console.log("Request status: " + httpRequest.status);
    }
}

数据以 JSON 格式发送，并且被正确接收。注释的console.log() 行返回

{"key1": "stringValue1", "key2": "stringValue2", "key3": intValue}

键和值完全符合预期。

但是，我无法访问这些数据。三个未注释的console.log() 行显示了我尝试访问此数据的方式，控制台显示

未定义
未定义
未定义

如何访问 AJAX 请求返回的 JSON 数据？

这个网站上还有其他几个问题有类似的问题，但我能找到的所有问题都不适用于这种情况，比如 React、jQuery 或 PHP。这是纯 JavaScript。

编辑：如果我不尝试解析 JSON，原始响应会返回为

console.log( this.responseText );
-> "{\"key1\": \"stringValue1\", \"key2\": \"stringValue2\", \"key3\": intValue}"

这只是预期的带有双引号转义反斜杠的 JSON 对象。

【问题讨论】：

你应该先试试console.log(data)，这样你就可以确定你实际得到了什么数据
您确定该对象不在数组中？ console.log(this.reponseText) 显示什么？
例如，在 ASP.NET 中，所有 AJAX（至少在 webform 中）都自动包含在 {d: result} 中，因此在这种情况下，您使用 console.log("1) " + data.d.key1])。另外，请记住它区分大小写（可能是“Key”？）
@charlietfl 它不在数组内。原始响应与 JSON 对象相同，只是引号使用了转义反斜杠。我已将完整的表达方式编辑到我的问题中。
如果 parse() 之后的类型是字符串，那么也许你已经嵌套了 json，但这不是这里显示的内容

标签： javascript json ajax

【解决方案1】：

问题中显示的函数dataReceiver()是访问从AJAX请求返回的JSON数据的正确方法。

在这种情况下，错误是由 sending 函数将返回的数据双重编码为 JSON 造成的。第一个编码将数据转换为字符串以进行传输，这就是它应该如何工作的方式。然后第二个编码将转义字符添加到该字符串，这会破坏编码。

由 console.log( this.responseText ); 记录的原始 JSON 不应包含转义斜杠。这是数据已被 JSON 编码两次的错误的最清晰指示。

原则上，使用任何从服务器发送数据的方法都可能发生此错误。在这种特殊情况下，数据是使用 Django 视图发送的

return JsonResponse(json.dumps(response), safe=False)

我希望 Python 的 json.dumps() 函数执行 JSON 编码；但是，Django 内置的JsonResonse() 也执行 JSON 编码，这在您考虑时很明显，但我设法不去想它；因此是双 JSON 编码。将其简化为

return JsonResponse(response, safe=False)

允许数据传输并被接收 JavaScript 函数正确解释。

【讨论】：