Загрузка значений JSON в DIV с помощью jQuery

Question

Я пытаюсь загрузить изображения из api graph Facebook в div на моем веб-сайте.

У меня есть div для каждого из альбомов на моей странице в фейсбуке, в каждом из которых есть url id в значении rel Я пытаюсь перебрать URL-адреса графика и загрузить первое изображение в каждый блок данных 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' с первого узла.

Answer 1

демо

вы пропустили callback=? в URL ...

$('.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 +')');
    });
});​

Answer 2

Вот краткий ответ: вы просто не можете этого сделать из-за той же политики происхождения.

Длинный ответ: из-за ограничений безопасности браузера большинство запросов «Ajax» подчиняются тому же источникуполитика ;запрос не может успешно получить данные из другого домена, субдомена или протокола.

Но я думаю, что API Facebook поддерживает обратный вызов JSONP с? callback = xxx.