Создание простого вызова API с помощью jQuery getJSON

Я пытаюсь создать простой генератор случайных кодов в кодеде, как вы можете видеть здесь: http://codepen.io/scabbyjoe/pen/dXQmLw

Соответствующий код, вставленный ниже:

<h1>Random Quote Machine</h1>
 <div>
 </div>
 <div>New Quote</div>
$(document).ready(function() {
 $(".btn").on("click", function(){
 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
 $(".quote").html(JSON.stringify(json));
 });
 });
});

Я боюсь, что я должен неправильно понимать инструмент getJSON, так как я не могу загрузить контент в мой div .quote.

Может кто-нибудь объяснить, почему это не работает?

Я пытаюсь следовать из этого (отдельного) примера, который действительно работает:

<div>
 <div>
 <h2>Cat Photo Finder</h2>
 </div>
 <div>
 <div>
 The message will go here
 </div>
 </div>
 <div>
 <div>
 <button id="getMessage">
 Get Message
 </button>
 </div>
 </div>
</div>
2 ответа

Проверьте свою консоль на наличие ошибок:

XMLHttpRequest не может загрузить http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. В запрошенном ресурсе нет заголовка "Access-Control-Allow-Origin". Origin 'http://s.codepen.io', следовательно, не допускается.

Вы не можете делать запросы AJAX для службы, размещенной в домене отдельно от вашего собственного, если только они специально не разрешают его. Это сообщение указывает, что оно не разрешено.

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


В панели консоли отображается сообщение об ошибке:

XMLHttpRequest не может загрузить http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. Нет заголовка "Access-Control-Allow-Origin" в запрошенном ресурс. Происхождение http://s.codepen.io 'поэтому не допускается доступ.

Вы должны убедиться, что api.forismatic.com обслуживает ресурс с разрешенным перекрестным доменом.

Или вы можете взглянуть на jquery.ajax crossDomain option

licensed under cc by-sa 3.0 with attribution.