将OpenClipArt api json解析为Html

Parse OpenClipArt api json to Html

本文关键字：Html json OpenClipArt api      更新时间：2023-11-14

我正在尝试解析这个jsonhttp://openclipart.org/search/json/?&query=圣诞节&page=1&在我的html页面中，金额=4。

我的代码是

<!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/，但是出了问题。

它在jsFiddle上不起作用的原因是因为同源策略。

这意味着，不允许您访问另一个域上的资源(http://openclipart.org/)来自jsfiddle.net.

请参阅以下两个资源：

  1. 同源政策
  2. 跨来源资源共享
相关文章：