这里出了什么问题？我是 JavaScript 和 API 的新手。任何意见是极大的赞赏。我希望页面只需在 youtube 中搜索 searchTerm 并将匹配的视频返回到控制台并将它们添加到文档中。
这是我的 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);
}
});
最佳答案
问题在于 API 返回的内容。 YouTube API 会正确返回您所拥有的内容，但数据上没有搜索。尝试在 getJSON 中使用 console.log(data);，您将看到没有 Search 对象...但是有 items 我认为这就是您在这里所追求的。
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);
}
关于javascript - 使用 YouTube API 构建允许 YouTube 搜索的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28817846/