php - $.getJSON 返回未定义的结果

Question

我正在尝试打印简单的 JSON 数据来理解和了解 JSON。我不太清楚我在这里做错了什么。

我在这里关注本教程 http://www.youtube.com/watch?v=rncW-74VL7U

这是我的 JavaScript:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$.getJSON("json.php", function(data)
{
    //json.php get the JSON data from here
    //function(data) callback function
    var itemslist = data.items[0];

    document.write(itemslist.key);
});
</script>

这是 PHP

<?php

// Set up the PHP to return the data in JSON format
header("content-type: application/json; charset=UTF-8" );

// This is a array of objects [key:"value", key2 : {k:"val", k2:"val2"}]
$myobj = '{items : [key:"value", key2 : {k:"val", k2:"val2"}]}';

$count = 2;

// Encode the above variables in JSON
echo json_encode(array("items" => $myobj, "count" => $count));

非常感谢您的帮助...

Answer 1

首先，您的 json 中有两个项目节点。 json_encode 中的项目和 myobj 字符串(现在是数组)中的项目。这就是为什么 data.items[0] 不起作用，它需要是 data.items.items[0]。也就是说，我首先发送给您的是使用键而不是索引，因此它确实需要是 data.items.items.key。综上所述，我当前包含的结构应该更好。

其次，尝试更多地使用console.debug。我刚刚将您的代码复制到我的开发盒上并运行它，并通过查看对象的外观发现了大部分 json 问题(我已将当前的 console.debug(data) 输出包含在 javascript 的注释中)。以下是有关 chrome 调试信息的链接:https://developers.google.com/chrome-developer-tools/docs/console

PHP

<?php

// Set up the PHP to return the data in JSON format
header("content-type: application/json; charset=UTF-8" );

// This is a array of objects [key:"value", key2 : {k:"val", k2:"val2"}]
$myobj= array(
          "value",
           array("k"=>"val","k2"=>"val2")
          );

$count = 2;

// Encode the above variables in JSON
echo json_encode(array("items" => $myobj, "count" => $count));
?>

Javascript

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$.getJSON("json.php", function(data){
    console.debug(data);
    var itemslist = data.items[0];
            console.debug(itemslist);
    document.write(itemslist);
});

/*
Object
    count: 2
    items: Object
        0: "value"
        1: Object
            k: "val"
            k2: "val2"
*/


</script>