如何在 $.ajax 方法的成功属性中访问对象的元素？答案

【问题标题】：How to access the elements of an object in the success property of $.ajax method?如何在 $.ajax 方法的成功属性中访问对象的元素？
【发布时间】：2017-12-22 04:43:39
【问题描述】：

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });
};

get_data.php 脚本返回的 JSON 对象为：

{
    id: 5, 
    username: "Anthony", 
    status: "accupied"
}

如果我执行console.log(data.length)，我可以得到数据对象的长度。但是，当我在成功属性中使用 console.log(data) 时，我可以看到该对象。如果我执行 console.log(data.username)，我将无法访问数据对象的元素，这样做会在控制台中显示未定义。我在函数 getReportedInfo 的范围之外创建了一个变量 data1，并将通过成功属性检索到的数据分配给在我尝试在函数外显示 data1 的内容后，这个变量。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

听起来data 是一个字符串而不是一个对象。您可以使用JSON.parse 将其转换为对象。试试下面的代码。

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            var dataObject = JSON.parse(data);
            console.log(dataObject.username);
        }
    });
};

编辑

在下面与cmets中的OP讨论后，确定返回的对象data是如下结构，并且已经是对象形式（不是字符串）

{
    "0": {
        id: 5, 
        username: "Anthony", 
        status: "accupied"
    }
}

因此下面的代码应该可以工作。

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            console.log(data["0"].username);
        }
    });
};

【讨论】：

当我尝试此解决方案时，我收到以下错误消息。未捕获的语法错误：JSON.parse () 位置 1 处的 JSON 中的意外标记 o
当我尝试此解决方案时，我收到以下错误消息。未捕获的语法错误：JSON.parse () 位置 1 处的 JSON 中的意外标记 o
@AndreReid 当你console.log(data)时会发生什么
为什么这被否决了？它是你如何做到的。甚至 dataType 在这个答案中也设置正确，不像其他答案只是这个答案的副本。
@Charlie Fish 这样做，console.log(data["0"].username) 会显示此人的用户名

【解决方案2】：

如果在php中你这样返回

<?php

echo json_encode($array);
// or 
return json_encode($array);

在 JavaScript 中，您可以在尝试使用时使用它，现在，即使您在请求中指示它，显然您也没有返回 JSON，在这种情况下它使用 parse：

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: { id:id },
        success: function(data) {
            var response = JSON.parse(data);
            console.log(response.id); // return 5
        }
    });
};

【讨论】：

同时设置 JSON 头，让浏览器知道它是 JSON。 header('Content-Type: application/json'); echo json_encode($data);
@Joel Jaime 尝试此解决方案时出现以下错误。未捕获的 SyntaxError：JSON.parse () 位置 1 处的 JSON 中的意外标记 o。和get_data.php的结尾，我有下面的echo json_encode($array);