使用jQuery将JSON值加载到DIV中

时间:2010-07-27 01:04:33

标签: jquery css json

我正在尝试将Facebook图形api中的图像加载到我网站上的div中。

我的facebook页面上的每个相册都有一个div,每个都有rel值中的url id。我试图循环图形api urls并使用下面的代码加载每个json数据块中的第一个图像:

$('.thumbnail').each(function(index) {
    $.getJSON('http://graph.facebook.com/'+ $(this).attr('rel') +'/photos', function(data) {
       $(this).css('background-image', 'url('+ data.data[0].picture +')');
    });
});

您可以在此处查看json的示例:http://graph.facebook.com/422882642272/photos

我只是试图遍历json并从第一个节点加载'picture'值。

2 个答案:

答案 0 :(得分:1)

demo

你错过了网址中的callback=? ...

$('.thumbnail').each(function(index) {
    var $this = $(this); // should save a reference of the current element...
    $.getJSON('http://graph.facebook.com/'+ $(this).attr('rel') +'/photos/?callback=?', function(data) {
       $this.css('background-image', 'url('+ data.data[0].picture +')');
    });
});​

答案 1 :(得分:0)

以下是简短回答:由于原始政策相同,你不能这样做。

答案很长: 由于浏览器安全限制,大多数“Ajax”请求受same origin policy的约束;请求无法成功从其他域,子域或协议中检索数据。

但我认为facebook API支持使用?callback = xxx进行JSONP回调。