Question

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

我已经尝试过async：false，ajax认为它可能会让它等待＆＃39;但仍然没有任何回报。我如何解决这个问题，以便设置所有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;
            }
        }
    });
}

更新：我刚刚将代码更改了一下，以使我的问题更加清晰。当代码运行时，它会警告真实的视频信息。预期的3倍。但是当它发出警报（id1）时它返回undefined - 所以＆＃39;返回videoid＆＃39;被忽略，不会将其传回变量。

更新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);

删除所有onload或文档就绪函数，这应该可行。

编辑：

你唯一能做的就是做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;
        }
    }
});

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

4 个答案: