Question

使用youtube api获取播放列表项。列表中有超过50个，因此需要构建一个循环来获取它们。单击按钮时，我调用的函数将一次返回50，然后将构建一个循环来获取所有项目。

从函数返回nextpagetoken时遇到问题。我无法找到一种方法来返回数据，所以我只是将nextpagetoken插入到函数内部div的html中，但是一旦函数完成，当我尝试获取html值它返回空白。

console.log（＆＃39; Nextpagetoken：＆＃39; + data.nextPageToken）;命令显示正确的值。

console.log（＆＃39;通话结束后：＆＃39; +下一个）;命令显示空白值。

此外，＆＃39; After call＆＃39;在＆＃39; Nextpagetoken＆＃39;之前，控制台日志中会显示命令。日志中。

任何帮助都很受欢迎。这是javascript和html：

$(document).ready(function()
{
    var loop=0;
    var data;
    var next='';

$('#get').click(function(){
    getVids();
    next=$('#pagetoken').text(); 
    console.log('After call: ' + next);
});        

  function getVids(page){
    $('#results').html("");
    data = {
              part: 'snippet',
              maxResults: 50,
              playlistId: 'playlist',
              key: 'myKey',
              pageToken: page
            };
    $.get(
      "https://www.googleapis.com/youtube/v3/playlistItems", data,
      function(data){
        var output;
        console.log('Page: ' + data.nextPageToken);
        $.each(data.items, function(i, item)
            {
              console.log(item);
              videoTitle = item.snippet.title;
              rvideoID = item.snippet.resourceId.videoId;
              vidThumburl = item.snippet.thumbnails.high.url;
              output = '<li style="list-style:none;">' + rvideoID + ' <a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoID + '">' + videoTitle + '<a/></li>';
              //Append to results list
              $('#results').append(output);
            });
        console.log('Nextpagetoken: ' + data.nextPageToken);
        $('#pagetoken').html(data.nextPageToken);

      });       
  }

  });

这是html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">   
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="yt.js"></script>
  </head>
  <body>
    <div id="container">
 <button id='get' type="button" class="btn btn-primary">Go</button>     
      <ul id="results"></ul>
      <div id='pagetoken'></div>
      </div>
    </div>

  </body>
</html>

Answer 1

接下来是空白的，因为当你调用console.log时，getVids是异步的并且还没有附加html

Youtube api - 如何从功能返回下一页令牌？

1 个答案: