Javascript JSONPjQuery中的回调函数

我正在使用一些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 -->

//设置查询所需的变量
变量URL=”http://api.flickr.com/services/feeds/photos_public.gne";
var ID=“”；
var jsonFormat=“&lang=en-us&format=json&jsoncallback=？”；
var ajaxURL=URL+“？id=“+id+jsonFormat；
//获取flickr帐户的最后照片，将其解析为HTML代码
$.getJSON（ajaxURL，函数（数据）{
var htmlString=“”；
//现在开始循环浏览我们的Flickr照片详细信息
$.each（data.items，function（i，item）{
//我只想要易怒的方形缩略图
var sourceSquare=（item.media.m）.replace（“_m.jpg”，“_s.jpg”）；
//这里是我们拼凑HTML的地方
htmlString+=''；
如果（i==11）{
返回false；
}
});
//在#images DIV中弹出我们的HTML
$（'#photos'）.html（htmlString）；
}); // 结束getJSOON

对于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 -->

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

//设置查询所需的变量
变量URL=”https://gdata.youtube.com/feeds/api/users/";
var UserName=“”；
var jsonFormat=“/uploads？v=2&alt=jsonc&max results=2&jsoncallback=？”；
//构建YouTube用户频道的JSON提要
var ajaxURL=URL+UserName+jsonFormat；
//获取YouTube帐户的最后视频，将其解析为HTML代码
$.getJSON（ajaxURL，函数（数据）{
var htmlString=“”；
$.each（data.data.items，函数（i，item）{
//这里是我们拼凑HTML的地方
htmlString+=''；
});
//在#videos DIV中弹出我们的HTML
$（'#videos'）.html（htmlString）；
});

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

---

当我从YouTube JSON链接中删除回调函数时，它在Opera上工作，但在IE上停止，反之亦然。。到底发生了什么？

对于jQuery AJAX调用，不需要将查询字符串附加到URL。使用数据参数。下面是一个例子：

$.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 -->

//设置查询所需的变量
变量URL=”http://api.flickr.com/services/feeds/photos_public.gne";
var ID=“”；
//获取flickr帐户的最后照片，将其解析为HTML代码
$.getJSON（URL+“？id=“+id，{lang:'en-us'，format:'json'，jsoncallback:'？'）函数（数据）{
var htmlString=“”；
//现在开始循环浏览我们的Flickr照片详细信息
$.each（data.items，function（i，item）{
//我只想要易怒的方形缩略图
var sourceSquare=（item.media.m）.replace（“_m.jpg”，“_s.jpg”）；
//这里是我们拼凑HTML的地方
htmlString+=''；
如果（i==11）{
返回false；
}
});
//在#images DIV中弹出我们的HTML
$（'#photos'）.html（htmlString）；
}); // 结束getJSOON

对于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 -->

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

//设置查询所需的变量
变量URL=”https://gdata.youtube.com/feeds/api/users/";
var UserName=“”；
//获取YouTube帐户的最后视频，将其解析为HTML代码
$.getJSON（URL+UserName+“/uploads”，{v:2，alt:'jsonc'，max results:2，jsoncallback:'？'}函数（数据）{
var htmlString=“”；
$.each（data.data.items，函数（i，item）{
//这里是我们拼凑HTML的地方
htmlString+=''；
});
//在#videos DIV中弹出我们的HTML
$（'#videos'）.html（htmlString）；
});

对于jQuery AJAX调用，不需要将查询字符串附加到URL。使用数据参数。下面是一个例子：

$.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 -->

//设置查询所需的变量
变量URL=”http://api.flickr.com/services/feeds/photos_public.gne";
var ID=“”；
//获取flickr帐户的最后照片，将其解析为HTML代码
$.getJSON（URL+“？id=“+id，{lang:'en-us'，format:'json'，jsoncallback:'？'）函数（数据）{
var htmlString=“”；
//现在开始循环浏览我们的Flickr照片详细信息
$.each（data.items，function（i，item）{
//我只想要易怒的方形缩略图
var sourceSquare=（item.media.m）.replace（“_m.jpg”，“_s.jpg”）；
//这里是我们拼凑HTML的地方
htmlString+=''；
如果（i==11）{
返回false；
}
});
//在#images DIV中弹出我们的HTML
$（'#photos'）.html（htmlString）；
}); // 结束getJSOON

对于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 -->

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

//设置查询所需的变量
变量URL=”https://gdata.youtube.com/feeds/api/users/";
var UserName=“”；
//获取YouTube帐户的最后视频，将其解析为HTML代码
$.getJSON（URL+UserName+“/uploads”，{v:2，alt:'jsonc'，max results:2，jsoncallback:'？'}函数（数据）{
var htmlString=“”；
$.each（data.data.items，函数（i，item）{
//这里是我们拼凑HTML的地方
htmlString+=''；
});
//在#videos DIV中弹出我们的HTML
$（'#videos'）.html（htmlString）；
});

这里有一个交易@hamama：有些东西告诉我，如果你的代码不能在一个浏览器中工作，那么你这里就有一个更大的问题。所有浏览器都以相对相同的方式处理代码，因为有些东西在任何地方都能工作，但有一个地方告诉我，你编写的其他东西让Opera感到不安。更不用说，我没有你所有的代码，所以很难理解上下文。你得自己做一些返工。不过我只是想给你一个基本的概念，我想不出来。。Opera上的脚本工作得很好，当我使用html发出警报时，它甚至可以在Opera中获得html代码！问题是代码没有附加。这是一把小提琴，同样适用于flickr Coder，因为你甚至没有使用我的代码。。。您仍然在使用查询字符串，而不是数据参数！让我们来做个交易@hamama：有些东西告诉我，如果你的代码不能在一个浏览器中工作，那么你就有了一个更好的浏览器