Question

我从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中执行此操作？

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

Answer 2

循环访问JSON并追加div：

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

Answer 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
}

在jQuery中添加来自JSON的div？

3 个答案: