使用 JQuery 显示 JSON答案

【问题标题】：Displaying JSON using JQuery使用 JQuery 显示 JSON
【发布时间】：2014-04-30 17:50:42
【问题描述】：

我在使用 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 非常令人困惑，因为您必须处理所有大括号。任何建议或帮助将不胜感激。提前致谢！

【问题讨论】：

您的选择器是否正确？你说#letter-w 是一个锚点，但你选择了#letter-w a，它将在#letter-w 中寻找一个锚点。
@MrCode 哦，是的，它是一个锚标签（a-href）

标签： javascript jquery arrays json object

【解决方案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

【讨论】：

非常感谢！是的，那是我的错误。 @MrCode 一个快速的问题，在这种情况下我必须在这里使用循环来显示对象还是直接一个一个地显示它们？

【解决方案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);
        });
    });
});

【讨论】：