我用youtube数据api搜索音乐。我使用javascript和jquery，我有一个问题。
这是我的代码
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="<?php echo SITE_PUBLIC; ?>/bootstrap-3.2.0/dist/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script>
function keyWordsearch(){
gapi.client.setApiKey('myapikey');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"eminem"},{"name":"shakira"}] }' );
$.each(data["data"], function( index, value ) {
makeRequest(value["name"]);
});
});
}
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
keyWordsearch();
</script>
此代码不起作用。Chrome 控制台显示"未捕获的类型错误：无法读取未定义的属性'setApiKey'"。但是这段代码是有效的：
keyWordsearch（） 到
$(document).click(function(){
keyWordsearch()
})
我不明白这个问题。提前
致谢
编辑
我的代码在jsFiddle上运行，但不运行我的html文件。我的 html 文件在这里：
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script>
$(function(){
function keyWordsearch(){
gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"eminem"}] }' );
$.each(data["data"], function( index, value ) {
makeRequest(value["name"]);
});
});
}
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
keyWordsearch();
})
</script>
</body>
</html>
看起来，你还没有加载javascript库。这就是为什么它找不到参考。您可以像这样添加它：
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
您可以在调用 API 时指定一个初始函数，如下所示： client.js?onload=init（请参阅下面的示例）。除了不需要 doucument.ready（） 包装器。我不确定为什么它在我的本地机器上与您的 API 密钥一起使用，但我想这是某种魔法，可以检查该网站是否可供公众使用 - 如果属实，您的 google 帐户中的引荐来源网址将变得很重要 - 如果有人知道这里到底发生了什么，请纠正我。
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<!--<link rel="stylesheet" type="text/css" media="screen" href="main.css" />-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function makeRequest(q) {
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 3
});
request.execute(function(response) {
$('#results').empty();
var resultItems = response.result.items;
$.each(resultItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
});
});
}
function init() {
gapi.client.setApiKey('AIzaSyCWzGO9Vo1eYOW4R4ooPdoFLmNk6zkc0Jw');
gapi.client.load('youtube', 'v3', function() {
data = jQuery.parseJSON( '{ "data": [{"name":"orsons"}] }' );
$.each(data["data"], function(index, value) {
makeRequest(value["name"]);
});
});
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body>
<h1>YouTube API 3.0 Test</h1>
<ul id="results"></ul>
</body>
</html>
除了解释您必须为 Google API 客户端<script>加载行指定并提供回调函数的所有答案之外，我想指出的是，当您从本地文件加载 Google API 客户端时.js onload参数似乎永远不会运行指定的函数（至少在 Chrome 中）（即使您通过网络服务器提供 HTML 页面而不是加载它来自文件系统，这显然似乎是谷歌 API JS 客户端的唯一问题......
例如：
<script src="/lib/js/client.js?onload=handleClientLoad"></script>
尽管将加载client.js，但这永远不会在完成加载后启动handleClientLoad函数。我认为指出这一点会很有用，因为这是一件非常令人沮丧的调试事情。
希望这有帮助。
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
这必须在最后调用，或者至少在你定义方法"handleClientLoad"之后调用。这是它的回调，只有在它被调用之后 - 这意味着谷歌 API 已经准备好了。这就是为什么你得到gapi.client是空的。
为了好玩，你可以在使用 gapi.client 之前使用几秒钟的超时，看看它不再是空的。