Javascript 将OpenClipartAPI json解析为Html_Javascript_Jquery_Html_Json

Javascript 将OpenClipartAPI json解析为Html

javascript jquery html json

Javascript 将OpenClipartAPI json解析为Html,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我试图在我的html页面中解析这个json 我的代码是 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.getJSON demo</title> <style> img { height: 200p

我试图在我的html页面中解析这个json

我的代码是

<!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>


jQuery.getJSON演示
img{
高度：200px；
浮动：左；
}
（功能（）{
变量api=”http://openclipart.org/search/json/?";
$.getJSON（api{
查询：“圣诞节”，
第1页：，
金额：“4”
}).完成（功能（数据）{
$。每个（数据。有效载荷，功能（i，项）{
$( "

，但有点不对劲。

它不在JSFIDLE上工作的原因是因为同源策略

这意味着，不允许您从jsfiddle.net访问另一个域（）上的资源

请参阅以下两个参考资料：

请求的资源上不存在“Access Control Allow Origin”标头。他们已修复该标头：DDD谢谢openclipart