为什么 js 和 html 代码没有运行搜索查询

我正在尝试使用Youtube的api，并运行搜索查询来检索找到的视频。当我运行js或html时，没有打印任何东西。身份验证密钥正确。当我运行js文件时，它所说的只是[Finished in 0.4s].当我运行 html 文件时，什么都没有显示。

js 文件

function showResponse(response) {
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
function onClientLoad() {
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
 }

function onYouTubeApiLoad() {
gapi.client.setApiKey('hidden');
search();
 }
function search() {
var request = gapi.client.youtube.search.list({
    part: 'snippet',
    q: 'dog'
});

request.execute(onSearchResponse);
 }
function onSearchResponse(response) {
showResponse(response);
 }

搜索网页代码

<!DOCTYPE html>
<html>
<head>
    <script src="search.js" type="text/javascript"></script>
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad"     type="text/javascript"></script>
    </head>
<body>
    <pre id="response"></pre>
</body>

默认情况下，视频链接的返回值是 json 响应格式中的视频 ID。

"id": {
  "kind": "youtube#video",
  "videoId": "dgVKzvO5zNc"
}

您可以过滤 JSON 响应并创建一个像链接一样的解决方法，下面是一个示例：

request.execute(function(response) {
    var items = response.result.items;
    for(i in items){
        var vidID = items[i].id.videoId;
        var link = '<a href="http://youtube.com/watch?v='+vidID+'">' + "link"+[i] + '</a><br>';
        document.getElementById('search-container').innerHTML += link;
    }
  });

网页文件

<!doctype html>
<html>
  <head>
    <title>Search</title>
  </head>
  <body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="search.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
    <div id="buttons"><input id="query" value='cats' type="text"/><button id="search-button" onclick="search()" >Search</button></label>
    </div>
    <div id="search-container">
    </div>
  </body>
</html>

相关内容

最新更新

热门标签：