无法通过 Youtube API 中为“搜索”提供的示例代码答案

【问题标题】：Not able to get through the sample code provided for "search" in Youtube API无法通过 Youtube API 中为“搜索”提供的示例代码
【发布时间】：2015-01-20 00:15:10
【问题描述】：

我正在尝试使用 Javascript 运行“搜索 - youtube 数据 api”的示例代码。我收到以下消息：“此应用程序需要访问您的 YouTube 帐户。请授权以继续。”我也有一个带有文本“cat”的禁用搜索按钮。现在为了解决这个问题，我已经阅读了其他线程也说不需要 oauth，因此也运行了这个线程中提到的代码。 youtube api v3 search by keyword javascript

但是，即使我进行了所有更改，当我单击授权按钮时，代码也不会向前移动，一个“#”会附加在浏览器的地址栏中，就是这样，我被卡住了。我正在输入客户 ID 和所有内容。但代码只是没有前进。任何帮助将不胜感激！！

编辑——这里是代码。

<!doctype html>

<html>
<head>
<title>Search</title>

</head>
<body>
  <div id="buttons">
  <label> <input id="query" value='cats' type="text"/><button id="search-button"  onclick="keyWordsearch()">Search</button></label>
  </div>
  <div id="search-container">
  </div>

  <script>
    function keyWordsearch(){
            gapi.client.setApiKey('API key here');
            gapi.client.load('youtube', 'v3', function() {
                    makeRequest();
            });
    }
    function makeRequest() {
            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>');
            });
    }
 </script>

 <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>
</body>
</html>

【问题讨论】：

标签： youtube-api youtube-javascript-api youtube-data-api

【解决方案1】：

我更正了您代码中的一些错误，例如 keyWordsearch 替换为 googleApiClientReady 和一些小错误。我测试了它工作的代码。不要忘记 API KEY。

<!DOCTYPE html>
<html>
    <head>
        <title>Search</title>

    </head>
    <body>
        <div id="buttons">
            <label><input id="query" value='cats' type="text"/><button id="search-button"  onclick="makeRequest()">Search</button></label>
        </div>
        <div id="search-container"></div>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

          <script>
          function makeRequest() {
                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>');
                });
        };
        function googleApiClientReady(){
                gapi.client.setApiKey('YOUR API KEY');
                gapi.client.load('youtube', 'v3', function() {});
        };
     </script>
     <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
    </body>
</html>

【讨论】：

非常感谢！！您的代码确实有效，但还有一个原因是我的代码无效。该代码仅在您从服务器运行时才有效，即使是 xampp 也可以。但我们需要类似 xampp 的东西来完成这项工作。