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

在运行全规模程序之前，我正在进行一些测试，这是件好事。我一直在进行一些测试以将一个多维数组从我的php文件返回到我的htm网页。我已经测试了很多东西来将我的问题缩小到JSON.parse((

<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也不会显示值。我没有收到错误消息，只有一个空白输出。提前感谢所有人的建议或修复。

edit：在将外部数组类型转换为对象后，我仍然只能得到空白输出。然而，我确实认为打字对我来说是必要的。

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

这不是你问题的答案-你已经解决了问题。但我想跟进几条评论，答案是正确设置代码格式的唯一方法。

@连字符bash提出了一个很好的建议：将数组封装在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将它们合并为一个。

相关内容

最新更新

热门标签：