Youtube API：如何获取视频 ID？ jQuery/Json

Question

目前正在使用以下代码从 YouTube 上的搜索中获取第一个视频，但是当调用 docready 时，未设置 ID。代码不会等待 ajax 结果返回，而是继续执行，不返回任何内容。

我用 ajax 尝试了 async:false，认为它可能会使其“等待”，但仍然没有返回任何内容。我将如何解决这个问题以便设置所有 id？

$(document).ready(function () {
    docready();
});

function docready() {
    var id1 = grabid("cat");
    var id2 = grabid("dog");
    var id3 = grabid("goldfish");
    alert(id1);
}

function grabid(keyword) {
    var url = 'http://gdata.youtube.com/feeds/api/videos?q=' + encodeURIComponent(keyword) + '&format=5&max-results=1&v=2&alt=jsonc';
    $.ajax({
        async: false,
        type: "GET",
        url: url,
        dataType: "jsonp",
        success: function (responseData, textStatus, XMLHttpRequest) {
            if (responseData.data.items) {
                var videos = responseData.data.items;
                videoid = videos[0].id;
                alert(videoid);
                return videoid;
            }
        }
    });
}

更新：我刚刚更改了上面的代码，以使我的问题更清楚一点。当代码运行时，它会按预期提示真正的“videoid”3 次。但是当它到达 alert(id1) 时，它会返回 undefined - 因此“返回 videoid”会被忽略，并且不会将其传递回变量。

更新 2 仍未解决

Answer 1

首先你的 ajax 调用有问题试试这个..

 $.ajax({
     type: "GET",
     url: url,
     dataType: "jsonp",
     success: function (responseData) {
                  var videos = responseData.data.items;
                  var videoid=videos[0].id;
                   alert(videoid);
                  //pass this videoid to anyother JS function it should work
                },
     error: function (xhr, textStatus, XMLHttpRequest) {
                 alert(xhr.responseText);
                }   

 });

编辑：

更新了从 ajax 调用中获取返回的代码：

 function grabid(keyword){
   var url = 'http://gdata.youtube.com/feeds/api/videos?q='+encodeURIComponent(keyword)+'&format=5&max-results=1&v=2&alt=jsonc';
  return $.ajax({
     type: "GET",
     url: url,
     dataType: "jsonp"       
    });   

}



function getVideoId(key) {
  key.success(function(respdata) {
      var videos = respdata.data.items;
      var videoid=videos[0].id;
     alert(videoid)
   });
  }

var ids = grabid(123);
getVideoId(ids);

删除所有的加载或文档准备功能，这应该可以工作。

编辑：

你唯一能做的就是做 async:false，它会等待 ajax 调用完成并返回一个值......但是 CROSS DOMAIN 调用不是同步的，所以我可以说你不走运......你需要重新思考ajax调用的逻辑。

同样从 jQuery 1.8 开始，不推荐使用 async: false。

Answer 2

我已经成功使用了以下代码（警告：去掉了一堆其他代码，所以这可能不会按原样运行）

function getVideos(playlistID) {
                $.ajax({
                    type: 'GET',
                    url: "http://gdata.youtube.com/feeds/api/playlists/" + playlistID + "?v=2&alt=json",
                    crossDomain: true,
                    processData: true,
                    data: {},
                    dataType: "jsonp",
                    success: loadVideos
                });
}

function loadVideos (data) {

        if (data && data.feed && data.feed.entry) {
            var markup = '<ul>';
            $.each(data.feed.entry, function (index) {
                var url = 'http://www.youtube.com/embed/' + this.media$group.yt$videoid.$t + '?rel=0&wmode=transparent',
                    title = this.title.$t,
                    thumb = this.media$group.media$thumbnail[0].url;
                markup += "<li><a data-rel='videos' href='" + url + "' target='_blank' class='youtube' title='" + title + "'><img src='" + thumb + "' alt='" + title + "' /></a></li>";
            });
            markup += '</ul>';


    }

Answer 3

好的，这是我尝试过的似乎有效的方法

function grabid(query) {
var yurl ='http://gdata.youtube.com/feeds/api/videos';
yurl = yurl+'?key=<GDATA API KEY>';
yurl = yurl+'&orderby=relevance';
yurl = yurl+'&start-index=1';
yurl = yurl+'&max-results=1';
yurl = yurl+'&v=2';
yurl = yurl+'&q='+encodeURI(query);

$.ajax({
    async: false,
    type: "GET",
    url: yurl,
    dataType: "xml",
    success: parseXml
});

var ytvideo = {
    ttl:title,
    vid:videoid,
    thm:thumb,
    vws:views,
    dur:duration
}
return ytvideo;
}

function parseXml(xml) {
$(xml).find("entry").each(function() {
    title = $(this).find("title").text();
    thumb = $(this).find("media\\:thumbnail, thumbnail").attr("url");
    videoid = $(this).find("yt\\:videoid, videoid").text();
    duration = $(this).find("yt\\:duration, duration").attr("seconds");
    views = $(this).find("yt\\:statistics, statistics").attr("viewCount");
});
}

Answer 4

您的问题是函数范围，您的ajax回调函数返回到什么？它不是你认为它可能在的地方。为什么不在所有函数的范围内创建一个数组并将 id 分配给它。下面的例子（未经测试）

// Id array in scope of all functions in this script
var id = [];

$(document).ready(function () {
    docready();
});

function docready() {
    // Removed vars as all id's are in the id array. Just grab what you want
    grabid("cat");
    grabid("dog");
    grabid("goldfish");

    // Alert the 'cat' item in the id array
    alert(id['cat']);
}

function grabid(keyword, success_callback) {
    var url = 'http://gdata.youtube.com/feeds/api/videos?q=' + encodeURIComponent(keyword) + '&format=5&max-results=1&v=2&alt=jsonc';
    $.ajax({
    async: false,
    type: "GET",
    url: url,
    dataType: "jsonp",
    success: function (responseData, textStatus, XMLHttpRequest) {
        if (responseData.data.items) {
            var videos = responseData.data.items;

            // Assign the video ID for the keyword to (array)id
            id[keyword] = videos[0].id;
        }
    }
});