在jQuery中从JSON添加div？答案

【问题标题】：Adding div from JSON in jQuery?在jQuery中从JSON添加div？
【发布时间】：2013-06-17 12:45:27
【问题描述】：

我正在从页面获取一些 JSON 格式的数据 JSON： { “名称”：“特立独行”，图片：“杰森” }

我现在需要获取这些值并将它们添加到#main div。

        <div id="main">
        <div class="a"> name: Eithan <img src="img/Eithan.jpg" /> <div>
        <div class="a"> name: Emma <img src="img/Emma.jpg" /> <div>
       </div>

如果 JSON 中有多个对象，我该如何在 jQuery 中执行此操作？

【问题讨论】：

标签： jquery json dom

【解决方案1】：

您可以使用$.getJSON() 函数来做到这一点。

$.getJSON("link/to/json", function(data) {
    $.each(data, function(i, item) {
        $('#main').append('<div class="a"> name: ' + item.name + ' <img src="img/' + item.image + '.jpg" /></div>');
    });
});

【讨论】：

@Ted，如果您从另一个域加载 json，那么您将受到跨域策略的限制，因此您必须使用 jsonp 请求。

【解决方案2】：

遍历 JSON 并附加一个 div：

$.each(data, function(i, item) {
    $('#main').append('<div class="a"> name: ' + item.name + ' <img src="img/' + item.image + '.jpg" /></div>');
);

【讨论】：

【解决方案3】：

嗯，如果你把 JSON 放在一个数组中，像这样（适用于多个项目）

[
    {'name':'maverick', 'image':'Jason'},
    {'name':'Darlig', 'image':'Rose'}
]

（注意将所有内容包装在 [ 和 ] 中，表示 JSON 数组）

现在你可以使用 for 循环

for (var i = 0; i < response.length; i++) {
    var currentPerson = response[i];
    var currentName = currentPerson.name;
    var currentImage = currentPerson.image;

    //use currentName and currentImage to add to the DOM
}

【讨论】：