javascript - 使用 JQuery 显示 JSON

Question

我在使用 JQuery 将 JSON 结构中的嵌套对象显示到页面时遇到问题。我正在使用 JQuery 的函数 (.getJSON)，但它似乎不起作用。

这是下面的 JSON 文件:

{
"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
            },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
            },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
           }
        }
}   

这是使用 JQuery 访问 JSON 对象的 Javascript 文件:

$(document).ready(function () {
    $('#letter-w a').click(function (event) {
        event.preventDefault();
        $.getJSON('widget.json', function (data) {
            var html = '';
            html += data.widget.debug;
            html += data.widget.window.title;
            html += data.widget.window.name;
        });
        $('#output').html(html);
    });
});

在上面的代码中，#letter-w 是一个链接的 ID，当点击它时会显示结果，#output 是输出/结果将在 HTML 页面本身中显示的 div。此外，为了检查，我只写了 2-3 行来访问 JSON 对象。 P.S JSON 非常令人困惑，因为您必须处理所有大括号和所有内容。 任何建议或帮助将不胜感激。提前致谢!

Answer 1

这一行在错误的地方:

$('#output').html(html);

它在回调之外，因此它实际上在检索和解析 JSON 之前执行，因为 AJAX 是异步的。将其移动到回调中:

$.getJSON('widget.json', function (data) {
    var html = '';
    html += data.widget.debug;
    html += data.widget.window.title;
    html += data.widget.window.name;
    $('#output').html(html);
});

同时查看我的评论，看起来你的选择器应该更改为 #letter-w 例如:

$('#letter-w').click