在jQuery中从JSON添加div？

Posted 2023-05-09

【中文标题】在jQuery中从JSON添加div？

【英文标题】：Adding div from JSON in jQuery?

【发布时间】：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 中执行此操作？

【参考方案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