Анализ изображения URL-адреса от JSON api

Question

У меня возникают проблемы с получением URL-адреса изображения из Wordpress JSON API и заполнением тега изображения.

Вот мой нерабочим код:

$(document).ready(function() { 
    $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683', {format: "json"}, function(data) {  
     $('#thumb').attr("src", data.post.thumbnail_images.full.url); 
    }); 
}); 

И HTML, как:

<img id="thumb" src="#"> 

Что я делаю неправильно? Помогите оценить.

Спасибо!

ПРИМЕЧАНИЕ: Мой реальный случай является динамическим (я получаю динамический список идентификаторов сообщений и перебираю их через $ .each()), но для этого случая я предоставляю пример с жесткокодированным идентификатором сообщения, поэтому вы может проверить возвращенный JSON.

Answer 1

Ваша проблема в том, что вы не можете выполнить кросс-запрос с использованием Javascript, скажем websiteA.com хочет получить информацию от websiteB.com с простым XMLHttpRequest. Это запрещено Access Control.

Ресурс создает HTTP-запрос кросс-происхождения, когда он запрашивает ресурс из другого домена, чем тот, который обслуживал сам. Например, страница HTML, поданная от http://domain-a.com, делает запрос <img> src для http://domain-b.com/image.jpg. Сегодня многие страницы в Интернете загружают такие ресурсы, как таблицы стилей CSS, изображения и сценарии из отдельных доменов.

Из соображений безопасности браузеры ограничивают сквозные HTTP-запросы, инициированные из сценариев. Например, XMLHttpRequest следует политике одного и того же происхождения. Таким образом, веб-приложение, использующее XMLHttpRequest, могло только делать HTTP-запросы в своем собственном домене. Чтобы улучшить веб-приложения, разработчики попросили поставщиков браузеров разрешить XMLHttpRequest выполнять междоменные запросы.

Если вы знаете владельца веб-сайта, который вы пытаетесь прочитать, то вы можете попросить их добавить свой домен в белый список в заголовках страниц. Если вы это сделаете, вы можете сделать так, как $.getJSON, как хотите.

Другой альтернативой может быть использование какого-либо внутреннего кода, чтобы прочитать этот веб-сайт и обслуживать его локально. Скажите, что ваш сайт example.com, у вас может быть PHP-скрипт, который работает на example.com/retrieve.php, где вы можете запросить этот веб-сайт, добавив «параметр», который вам нужен. После этого, поскольку example.com - это ваш собственный сайт, вы можете просто сделать $.getJSON себе. Есть a simple PHP proxy you can use here с небольшим количеством объяснений, почему вы можете сделать это таким образом.

Третьим вариантом будет редактирование кода Javascript для использования Yahoo! Служба YQL. Хотя нет никакой гарантии, что она будет работать вечно, вы можете использовать ее для запроса веб-сайта от вашего имени, а затем использовать его для печати всего, что вы хотите на экране. Недостатком является то, что это, возможно, не является этически правильным, если вы не владеете веб-сайтом, который вы пытаетесь извлечь (плюс, они могут добавить файл robots.txt, препятствующий доступу).

Надеюсь, что это поможет.

Answer 2

JSONP решает проблему.Просто нужно добавить параметр обратного вызова и указать это JSONP, как:

$(document).ready(function() { 
    $.getJSON('http://interelgroup.com/api/get_post/?post_id=4683&callback=?', {format: "jsonp"}, function(data) { 
     $('#thumb').attr("src", data.post.thumbnail_images.full.url); 
    }); 
}); 

Больше информации здесь: Changing getJSON to JSONP

Информация о JSONP: https://en.wikipedia.org/wiki/JSONP