YouTube API始终为不同的查询提供相同的视频

Question

我正在建立一个从YouTube加载视频的网站.问题是,当我使用其他查询时,我总是得到相同的视频.如果我使用下面的查询,结果在两种情况下都是相同的.

1. 用'plop'

   https://www.googleapis.com/youtube/v3/search?part=snippet&key=my_key&q=plop 
   

   

2. 使用'K3':

   https://www.googleapis.com/youtube/v3/search?part=snippet&key=my_key&q=k3
   

   

这是我的代码:

$("body").ready(function () {
    init();
});

function init() {
    $("#search-button").click(function () {
        $.ajax({
            url: "https://www.googleapis.com/youtube/v3/search?part=snippet&key=my_key&q=" + $("#query"),
            success: function (data) {

                //data = JSON.parse(data);
                var lengte = data.items.length;

                $("#search-container").empty();

                for(var i = 0; i < lengte; i++) {

                    $("#search-container").append('<iframe width="427" height="240" src="https://www.youtube.com/embed/' + data.items[i].id.videoId + '" frameborder="0" allowfullscreen></iframe>');
                }
                console.log(data);
            },
            error: function() {
                console.log("oops");
            }
        });
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
    <label>
        <input id="query" type="text"/>
        <button id="search-button" >Search</button>
    </label>
</div>
<div id="search-container"></div>

Answer 1

您要发送的网址应为:

 url: "https://www.googleapis.com/youtube/v3/search?part=snippet&key=my_key&q=" + $("#query").val(),

目前,您似乎正在尝试追加该input元素,因此youtube正在搜索"对象",您可以从结果中看到.要解决此问题,您必须添加.val()以获取文本框中的值.

希望这可以帮助!