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

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

使用JQuery显示JSON

2 个答案: