使用AJAX从php文件传递JSON字符串后，如何将JSON字符串解析为Javascript中的多维数组？

Question

在运行全面程序之前，我正在做一些测试，这是一件好事。 我一直在做一些测试，以将多维数组从我的php文件返回到我的htm网页。 我已经测试了许多方法，将问题缩小到JSON.parse（）。 这是我在文件response.php中的PHP代码：

<html>
<head>
</head>

<body>
<?php
$test = array(
array("first" => "Aaron", "last" => "Rodgers"),
array("first" => "Willie", "last" => "Makit")
);
//header('Content-Type: application/json');
echo json_encode($test);
?>
</body>
</html>

和我的输出是正常的：

{"0":{"first":"Aaron","last":"Rodgers"},"1":{"first":"Willie","last":"Makit"}} //New output as per object typecasting

然后在我的htm文件中，我只是想在按下按钮后将名字“ Aaron”显示为输出。 这是我的html和javascript的代码：

<html>
<head>
<script type="text/javascript" language="javascript">
function ajaxTest(){
    var testAjax = new XMLHttpRequest();
    testAjax.onreadystatechange = function(){
        if(testAjax.readyState==4)
        {
            var test1 = JSON.parse(testAjax.responseText);
            document.getElementById("doIt").innerHTML = test1.row[0].first;    //I believe my error might be an issue with my formatting on this line
        }
    }
    testAjax.open("GET", "response.php", true);
    testAjax.send(null);
}
</script>
</head>

<body>
<input type="button" value="try it" onclick="ajaxTest()"/>
<div id="doIt"></div>
</body>
</html>

我尝试显示原始的json字符串，并且有效。 但是一旦我使用JSON.parse（），我尝试显示的任何数据都是空白。 我尝试了几种格式，包括以下内容：

document.getElementById("doIt").innerHTML = test[0][1];
... = test[0].first;
... = test;
... = test.length;

但是，无论采用哪种格式，我都不会输出（至少可见）。 令我感到困惑的部分是，即使我的array.length也不会显示值。 我没有收到错误消息，只是空白输出。 在此先感谢您提供任何指导或修复所有人。

编辑：在将我的外部数组类型转换为对象后，我仍然只得到空白输出。 但是我确实认为在我的情况下必须进行类型转换。

Answer 1

在PHP文件中，删除HTML标记。 这样可以解决问题。 否则，当从.htm文件中调用responseText时，该字符串将包含HTML标记，并且在使用JSON.parse（）解析数据时将导致语法错误。

Answer 2

这不是您问题的答案-您已经解决了问题。 但是我想跟进一些评论，而答案是进行正确代码格式化的唯一方法。

@hyphenbash提出了一个很好的建议：将数组包装在一个对象中以进行JSON输出，而不是输出裸数组。 尽管JSON确实允许在最高级别使用数组（与声明这将是无效JSON的注释相反），但使用对象代替并将数组作为属性放入对象内部有很多好处。

考虑原始JSON的数组版本（在添加(object)强制类型转换之前）。 看起来像这样（具有一些可读性的格式）：

[
    { "first":"Aaron", "last":"Rodgers" },
    { "first":"Willie", "last":"Makit" }
]

没什么问题，但是假设您想向JSON响应中添加不属于数组的其他内容，可能是某种状态或错误指示。 没有地方放！

相比之下，假设您将数组包装在一个对象中：

{
    data: [
        { "first":"Aaron", "last":"Rodgers" },
        { "first":"Willie", "last":"Makit" }
    ]
}

现在，如果您想添加其他一些信息，这很容易：

{
    status: "test",
    data: [
        { "first":"Aaron", "last":"Rodgers" },
        { "first":"Willie", "last":"Makit" }
    ]
}

生成此代码的PHP代码是对原始代码的简单更改：

<?php
$test = array(
    "status" => "test",
    "data" => array(
        array("first" => "Aaron", "last" => "Rodgers"),
        array("first" => "Willie", "last" => "Makit")
    )
);
echo json_encode($test);
?>

在您的JavaScript代码中同样容易处理：

var test1 = JSON.parse(testAjax.responseText);
document.getElementById("doIt").innerHTML = test1.data[0].first;

请注意我在JavaScript代码中建议的其他一些小更改：

删除0左右的引号-都可以，但是习惯上将数字索引与数组一起使用。
访问对象属性时，请使用.foo表示法代替["foo"] 。 两种方法也都可以在这里使用，但是.foo是惯用的，而且更加简洁。

在PHP和JavaScript之间进行切换有些令人困惑，因为JavaScript具有数组和对象的独立概念，其中PHP将数组和对象结合在一起。

使用AJAX从php文件传递JSON字符串后，如何将JSON字符串解析为Javascript中的多维数组？

问题描述

2 个解决方案

解决方案1
0 2015-07-04 21:58:28

解决方案2
0 2015-07-04 22:17:42

使用AJAX从php文件传递JSON字符串后，如何将JSON字符串解析为Javascript中的多维数组？

问题描述

2 个解决方案

解决方案1 0 2015-07-04 21:58:28

解决方案2 0 2015-07-04 22:17:42

解决方案1
0 2015-07-04 21:58:28

解决方案2
0 2015-07-04 22:17:42