javascript - 使用 Jquery 获取 JSON 属性

Question

这是我的test.json 文件:

[{"id":"12","url":"http:\/\/localhost\/test\/1\/images\/pic\/3.jpg"},
{"id":"11","url":"http:\/\/localhost\/test\/1\/images\/pic\/1.png"},
{"id":"10","url":"http:\/\/localhost\/test\/1\/images\/pic\/2.png"}]

我想使用 jQuery 将其打印在强调文本上。

<div>12<img src="http://localhost/test/1/images/pic/3jpg" /></div>
<div>11<img src="http://localhost/test/1/images/pic/1jpg" /></div>
<div>10<img src="http://localhost/test/1/images/pic/2jpg" /></div>

Answer 1

如果您想从服务器获取 json 而不是将其硬编码到 JavaScript 中，请使用 jquery 的 .getJSON() 方法 ( see docs )。然后使用 .each() 方法 ( see docs ) 迭代响应数据。

$.getJSON(
    'test.json',
    function(data) {
        $.each(data, function(i, obj) {
            el = $('<div>' + obj['id'] + '<img src="'+ obj['url'] +'" /></div>');
            $('body').append(el);
        });
    }
);