[英]Displaying JSON using JQuery
I am having problem in displaying the nested objects within the JSON structure into the a page using JQuery. 我在使用JQuery将JSON结构中的嵌套对象显示到页面时遇到问题。 I'm using JQuery's function (.getJSON), but it doesn't seem to be working. 我正在使用JQuery的函数(.getJSON),但它似乎没有用。
This is the JSON file below: 这是下面的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;"
}
}
}
And this is the Javascript file that uses JQuery to access the JSON objects: 这是使用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);
});
});
In the above code, #letter-w is a id for a link that when clicked displays the result and #output is the div where the output/results will be displayed within the HTML page itself. 在上面的代码中,#letter-w是链接的id,单击时显示结果,#output是输出/结果将显示在HTML页面本身的div。 Also, for the sake of checking, I've only written 2-3 lines to access the JSON objects. 另外,为了检查,我只写了2-3行来访问JSON对象。 PS JSON is very confusing since you've to takecare of all the braces and all. PS JSON非常令人困惑,因为你需要注意所有的括号。 Any suggestions or help would be grateful. 任何建议或帮助将不胜感激。 Thanks in-advance! 提前致谢!
This line is in the wrong place: 这条线在错误的地方:
$('#output').html(html);
It is outside of the callback and so this actually executes before the JSON is retrieved and parsed because the AJAX is asynchronous. 它在回调之外,因此在检索和解析JSON之前实际执行,因为AJAX是异步的。 Move it into the callback: 将其移至回调中:
$.getJSON('widget.json', function (data) {
var html = '';
html += data.widget.debug;
html += data.widget.window.title;
html += data.widget.window.name;
$('#output').html(html);
});
Also check my comment, it looks like your selector should be changed to #letter-w
such as: 还要检查我的评论,看起来您的选择器应该更改为#letter-w
例如:
$('#letter-w').click
Two things you should look at. 你应该看两件事。 As @MrCode a few moments ago, make sure your selector is right. 作为@MrCode ,请确保您的选择器是正确的。 If #letter-w
is an anchor tag, then #letter-w a
is probably the wrong selector. 如果#letter-w
是一个锚标签,那么#letter-w a
可能是错误的选择器。
Secondly, $.getJSON
is an asynchronous call. 其次, $.getJSON
是一个异步调用。 Move $('#output').html(html);
移动$('#output').html(html);
inside the success callback to prevent it from executing before the call returns. 在成功回调中,以防止它在调用返回之前执行。
$(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);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.