使用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对象。 PS 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

Answer 2

你应该看两件事。 作为@MrCode ，请确保您的选择器是正确的。 如果#letter-w是一个锚标签，那么#letter-w a可能是错误的选择器。

其次， $.getJSON是一个异步调用。 移动$('#output').html(html); 在成功回调中，以防止它在调用返回之前执行。

$(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);
        });
    });
});