Question

$.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", function(data) {
    $.each(data.data.children, function(i,item){
        $("<img/>").attr("src", item.data.url).appendTo("#images");
    });
});

fiddle here 我看到了这段代码，我不知道它是如何工作的。特别是function(i,item)。我读到here逗号后面的函数是＆＃34;一个普通的对象或字符串，用请求发送到服务器＆＃34;但是我不确定该函数是如何自动从reddit中获取图像的。我只是想学习如何使用json和jquery，因为我之前从未接触过它。

Answer 1

此：

$.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", function(data) {
    // function body
});

是给定URL的AJAX请求。它希望URL能够响应一些JSON格式的数据。收到响应后，提供的函数将使用该预期数据执行：

function(data) {
    // function body
}

此：

$.each(data.data.children, function(i,item){
    $("<img/>").attr("src", item.data.url).appendTo("#images");
});

将迭代data.data.children中的值并对每个值执行提供的函数：

function(i,item){
    $("<img/>").attr("src", item.data.url).appendTo("#images");
}

提供给getJSON调用的函数和提供给each调用的函数彼此无关。 “外部”功能不知道“内部”功能在做什么。

如同您提供的示例一样放在一起时，所有发生的事情都是对给定的URL发出AJAX请求，并且从该URL返回的数据包含一组项目。该集合被迭代并用于在页面上创建img元素。

你能为我分解这个jquery代码吗？

1 个答案: