2013-11-27 5 views
0

Я пытаюсь разобрать этот json http://openclipart.org/search/json/?&query=christmas&page=1&amount=4 на моей странице html.Parse OpenClipArt api json to Html

Мой код

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery.getJSON demo</title> 
     <style> 
      img { 
       height: 200px; 
       float: left; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    </head> 
    <body> 
     <div id="images"></div> 
     <script> 
      (function() { 
       var api = "http://openclipart.org/search/json/?"; 
       $.getJSON(api, { 
        query: "christmas", 
        page: "1", 
        amount: "4" 
       }).done(function(data) { 
        $.each(data.payload, function(i, item) { 
         $("<img>").attr("src", item.svg.png_thumb).appendTo("#images"); 
         if (i === 3) { 
          return false; 
         } 
        }); 
       }); 
      })(); 
     </script> 
    </body> 
</html> 

http://jsfiddle.net/2n8ax/, Но что-то не так.

+0

Нет 'Access-Control-Allow-Origin' заголовок присутствует на запрошенный ресурс. – CharliePrynn

+0

Они исправили это: DDD Спасибо openclipart <3 – user3041529

ответ

0

Причина, по которой он не работает на jsFiddle, является результатом политики одного происхождения.

Это означает, что вы находитесь не разрешено получать доступ к ресурсам в другом домене (http://openclipart.org/) от jsfiddle.net.

Посмотреть эти два ресурса:

  1. Same-origin policy
  2. Cross-origin resource sharing
+0

Это не работает на моем ПК (локальном) ни – user3041529

+0

Если вы откроете консоль, какая ошибка вы получаете? – CharliePrynn

+0

Ничего, только предупреждения. Есть ли способ заставить его работать? – user3041529