YouTube 数据 API v3 使用 Javascript

Question

我对编写代码和使用 API 有点陌生。我不完全确定为什么我的程序没有按我希望的方式工作。

我想要它做的是在控制台中提供搜索结果，然后我才能继续我希望它接下来做的事情；但是，我不认为正在搜索任何内容。

根据这个：https://developers.google.com/youtube/v3/docs/search/list#http-request，唯一需要的参数是"part,"所以我认为我做的一切都对吗？不过可能不是，因为据我所知，当我尝试搜索某个术语时，没有搜索到任何内容。这是我的代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form id="search-term">
            <p>Enter Name:<br/>
                <input id="query" type="text" name="Name"/><br/>
                <hr/>
                <input type="button" value="Enter here"/>
            </p>
            <div id="search-results">

            </div>
        </form>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JavaScript:

  $(document).ready(function(){

  $('#search-term').submit(function(event){
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });


function getRequest(searchTerm){
  var params = {
    "q": "searchTerm",
    "part": 'snippet',
    "type": 'video',
    "key": 'I was advised to keep my key private, so I edited this part out'
  }
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.items);
   })
}

function showResults(results){
  var html = "";

  $.each(results, function(index,value){
    html += '<p>' + value.snippet.thumbnails.high.url + '</p>' + '<p>' + 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>' + '<hr/>';
    console.log(value.snippet.thumbnails.high.url);
    console.log(value);
  })
  $('#search-results').html(html);
}
})

Answer 1

You probably want data.items instead of data.search

我在其文档中列出的 "Response" 部分下没有看到任何提及 'search' 参数的内容。在此处查看响应属性：https://developers.google.com/youtube/v3/docs/search/list#response

因此，如果您 console.log(data); 而不是 data.search

，您可能会看到一些输出

我建议你看看Google's Javascript API Client Library. It might not be the best solution for you, but it's worth a try. Download on GitHub

示例使用 gapi.client.youtube.search.list:

// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}

YouTube 数据 API v3 使用 Javascript

YouTube Data API v3 Using Javascript

javascript

youtube-data-api