JSONP jQuery中的回调函数

Question

我正在使用一些 jQuery 脚本从 Flickr 和 YouTube 获取 JSON 提要，并在我的 WordPress 网站上从它们生成 HTML 对于 Flickr，我使用

<!-- Script to grab photos from Flickr feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "<?php echo get_option('of_flickrid') ?>";
var jsonFormat = "&lang=en-us&format=json&jsoncallback=?";

var ajaxURL = URL + "?id=" + ID + jsonFormat;
// Get the last photos of the flickr account, parse it into HTML code
$.getJSON(ajaxURL, function(data){
     var htmlString = "<h1><?php echo get_option('of_photostext') ?></h1>";

    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){

        // I only want the ickle square thumbnails
     var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

        // Here's where we piece together the HTML
        htmlString += '<a href="' + item.link + '" target="_blank">';
        htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
        htmlString += '" alt="'; htmlString += item.title + '" class="rounded"/>';
        htmlString += '</a>';
        if(i === 11){
            return false;
        }
    });

    // Pop our HTML in the #images DIV
    $('#photos').html(htmlString);

}); // End getJSOON
</script>
<!-- End of Script to grab photos from Flickr feed -->

对于 YouTube：

<!-- Script to grab videos from YouTube feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "https://gdata.youtube.com/feeds/api/users/";
var UserName = "<?php echo get_option('of_youtubeid') ?>";
var jsonFormat = "/uploads?v=2&alt=jsonc&max-results=2&jsoncallback=?";
// Construct the JSON feed of the YouTube user's channel
var ajaxURL = URL + UserName + jsonFormat;
// Get the last videos of the YouTube account, parse it into HTML code
$.getJSON(ajaxURL, function(data){
     var htmlString = "<h1><?php echo get_option('of_videostext') ?></h1>";

    $.each(data.data.items, function(i,item){       
        // Here's where we piece together the HTML
        htmlString += '<iframe class="videos" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/';
        htmlString += item.id;
        htmlString += '?autoplay=0" frameborder="0"></iframe>';
    });

    // Pop our HTML in the #videos DIV
    $('#videos').html(htmlString);
});
</script>
<!-- End of Script to grab videos from YouTube feed -->

脚本在除 Opera 之外的所有浏览器中运行良好。

当我从 YouTube JSON 链接中删除回调函数时，它可以在 Opera 上运行，但在 IE 上停止，反之亦然。这到底是怎么回事？

Answer 1

对于 jQuery AJAX 调用，您不需要将查询字符串附加到您的 URL。使用数据参数described in the documentation。这是一个例子：

$.getJSON('myURL.php', { param1: value1, param2: value2 }, function(data) {
    //handle my data here
    alert(data);
});

对于您的情况，我会为 Flickr 尝试以下代码：

<!-- Script to grab photos from Flickr feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "<?php echo get_option('of_flickrid') ?>";

// Get the last photos of the flickr account, parse it into HTML code
$.getJSON(URL + "?id=" + ID, { lang: 'en-us', format: 'json', jsoncallback: '?' } function(data){
     var htmlString = "<h1><?php echo get_option('of_photostext') ?></h1>";

    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){

        // I only want the ickle square thumbnails
     var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

        // Here's where we piece together the HTML
        htmlString += '<a href="' + item.link + '" target="_blank">';
        htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
        htmlString += '" alt="'; htmlString += item.title + '" class="rounded"/>';
        htmlString += '</a>';
        if(i === 11){
            return false;
        }
    });

    // Pop our HTML in the #images DIV
    $('#photos').html(htmlString);

}); // End getJSOON
</script>
<!-- End of Script to grab photos from Flickr feed -->

对于 YouTube：

<!-- Script to grab videos from YouTube feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "https://gdata.youtube.com/feeds/api/users/";
var UserName = "<?php echo get_option('of_youtubeid') ?>";

// Get the last videos of the YouTube account, parse it into HTML code
$.getJSON(URL + UserName + "/uploads", { v: 2, alt: 'jsonc', max-results: 2, jsoncallback: '?' } function(data){
     var htmlString = "<h1><?php echo get_option('of_videostext') ?></h1>";

    $.each(data.data.items, function(i,item){       
        // Here's where we piece together the HTML
        htmlString += '<iframe class="videos" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/';
        htmlString += item.id;
        htmlString += '?autoplay=0" frameborder="0"></iframe>';
    });

    // Pop our HTML in the #videos DIV
    $('#videos').html(htmlString);
});
</script>
<!-- End of Script to grab videos from YouTube feed -->