Question

这里有什么问题？我是JavaScript新手并使用API。任何意见是极大的赞赏。我希望页面只是在youtube上搜索searchTerm并将匹配的视频返回到控制台并将它们添加到Document中。

这是我的HTML和JS。

HTML：

<body>
<form id="search-term">
    <input type="text" name="input" id="query" placeholder="Enter YouTube search here" />
    <label for="input"><input type="submit" class="submit" value="Submit" /></label>
</form>
<div id="search-results"> </div>

JS：

$(document).ready(function(){


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

function getRequest(searchTerm){
    var params = {
        part: 'snippet',
        key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ',
        q: searchTerm,
//      r: 'json'
    };
    url = 'https://www.googleapis.com/youtube/v3/search';

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

function showResults (results) {
    var html = "";
    $.each(results, function(index, value) {
        html += '<p>' + value.Title + '</p>';
        console.log(value.Title);
    });
    $('#search-results').html(html);
}

}）;

Answer 1

问题在于API返回的内容。 YouTube API会正确返回您拥有的内容，但Search上没有data。在console.log(data);中尝试使用getJSON，您会发现没有Search个对象......但我认为items就是您在此之后的目标。< / p>

function getRequest(searchTerm){
  var params = {
    part: 'snippet',
    key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ',
    q: searchTerm,
  //r: 'json'
  };
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.items); //<-- There is no `data.Search`
  }); 
}

function showResults (results) {
  var html = "";
  $.each(results, function(index, value) {
    html += '<p>' + value.snippet.title + '</p>';
    console.log(value.snippet.title); //<-- There is also no `Title` on value.
  });
  $('#search-results').html(html);
}

构建允许使用YouTube API进行YouTube搜索的页面

1 个答案: