У меня проблемы с получением 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 выглядит так:

 {amp}lt;img id="thumb" src="#"{amp}gt; 

Что я делаю неправильно? Помощь приветствуется.

Благодарность!

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

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

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

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

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

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

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

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

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

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

Более подробная информация здесь: Изменение getJSON на JSONP

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