时间戳

首页 > 解决方案 > 如何访问从 AJAX 请求返回的 JSON 数据？

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

问题描述

我有一个 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()的行显示了我尝试访问此数据的方式，控制台显示

  1. 不明确的
  2. 不明确的
  3. 不明确的

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

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

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

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

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

标签： javascriptjsonajax

解决方案

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

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

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

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

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

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

return JsonResponse(response, safe=False)

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

推荐阅读