1

我正在构建一个闪烁应用程序，我注意到闪烁使用不同类型的 jSONP 回调

作为我的 JSONP 回调替换我现有网址？即使我传递它们，我现有的 url 也没有给出页码。

flicker 生成的新 url 发布在下面，但我没有为其添加 json 回调。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=178b8c00abf3e44e1def5f60d2002cb1&tags=paris&per_page=10&page=3&format=json

我的工作代码如下

<!DOCTYPE html >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script language="javascript">
        function myAJAXfun(event) {
            var searchTerm = $("#search").val(); // get the user-entered search term

            var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
            var ID = "25053835@N03";
            //var tagmode="&tagmode=any";
            //var format ="&format=json";
            var perpage = 10;
            var page = 1;
            var tags = "&tags=" + searchTerm;
            var tagmode = "&tagmode=any";
            var jsonFormat = "&format=json&jsoncallback=?";
            var ajaxURL = URL + "?jsoncallback=?id=" + ID + "&per_page=" + perpage + "&page=" + page + tags + tagmode + jsonFormat;
            //var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;

            $.getJSON(ajaxURL, function (data) {
                //$("h1").text(data.title);
                //alert(data.length);

                var photoHTML;
                $("#photos").empty();
                if (data.items.length) {
                    alert(data.items.length);

                    $.each(data.items, function (i, photo) {

                        //var photoHTML = "<h4>" +photo.tags + "</h4>";
                        photoHTML += '<a href="' + photo.link + '">';
                        photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';

                        $('#photos').append(photoHTML).fadeIn(200);


                    });

                } else {
                    alert(data.items.length);
                    photoHTML = "<h2> No Results</h2>";
                    $('#photos').append(photoHTML).fadeIn(200);
                }
                //$('#photos').append(photoHTML).fadeIn(200);

            });
        }
        $(document).ready(function () {
            $("#submit").click(function (event) {
                myAJAXfun();

            });

            $("#scrollbox").scroll(function () {
                // check if we're at the bottom of the scrollcontainer
                //alert($(this)[0].scrollHeight + "- "+$(this).scrollTop() +"== "+$(this).outerHeight())
                if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
                    // If we're at the bottom, retrieve the next page
                    page++;
                    //$("#submit").click();
                    myAJAXfun();
                }

                //      myAJAXfun();
            });
        });
    </script>
    <style type="text/css">
        #container {
            width:400px;
            margin:0px auto;
            padding:40px 0;
        }
        #scrollbox {
            width:900px;
            height:450px;
            overflow:auto;
            overflow-x:hidden;
            border:1px solid #f2f2f2;
            margin-top:150px;
        }
        #container > p {
            background:#eee;
            color:#666;
            font-family:Arial, sans-serif;
            font-size:0.75em;
            padding:5px;
            margin:0;
            text-align:right;
        }
        #searchBar {
            align:center;
            position:fixed;
            height:150px;
            background-color:#777;
            border:1px solid red;
            width:100%;
            top:0;
        }
        #photos {
        }
    </style>
</head>

<body>
    <div align="center" id="searchBar">
        <h2>flicker tag search</h2>
        <div>Enter Search Term</div>
        <input type="text" id=search />
        <input type="button" id=submit value="Search" />
    </div>
    <div id="container">
        <div id="scrollbox">
            <div id="photos"></div>
        </div>
        <p><span id="status"></span>
        </p>
    </div>

</body>

</html>
4

1 回答 1

1

您需要使用参数设置 jsonpcallback 方法名称jsoncallback

dataType: "jsonp",
jsonp: 'jsoncallback'

见http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=178b8c00abf3e44e1def5f60d2002cb1&tags=paris&per_page=10&page=3&format=json&jsoncallback=x

尝试

function myAJAXfun(event) {

    var ajaxURL = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=178b8c00abf3e44e1def5f60d2002cb1&tags=paris&per_page=10&page=3&format=json'
    $.ajax({
        url: ajaxURL,
        dataType: "jsonp",
        jsonp: 'jsoncallback',
        success: function (data) {
            console.log(data);
        }
    });

}

演示：小提琴

于 2013-10-22T06:05:28.103 回答