1

現在、以下のコードを使用して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が返されます。したがって、「return videoid」は無視され、変数に戻されません。

UPDATE2はまだ解決されていません

4

4 に答える 4

0

まず、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またはdocumentready関数を削除します。これは機能するはずです。

編集 ：

あなたができる唯一のことはasync：falseを実行することです。これは、ajax呼び出しが終了して値を返すのを待ちます...しかし、CROSS DOMAIN呼び出しは同期していないので、運が悪いと言えます。 ajax呼び出しのロジックについて考えてください。

また、jQuery 1.8以降、async：falseの使用は非推奨になりました。

于 2012-07-14T15:41:58.270 に答える
0

私は以下をうまく使用しました（注意：他のコードの束を取り除いたので、これはそのままでは実行されない可能性があります）

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>';


    }
于 2012-07-14T18:21:19.593 に答える
0

わかりました、これが私が試したもので、うまくいったようです

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");
});
}
于 2013-11-19T09:36:44.457 に答える
-1

あなたの問題は関数スコープです、あなたの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;
        }
    }
});
于 2012-07-14T16:10:43.793 に答える