javascript - YouTube api 总是为不同的查询提供相同的视频

Question

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

1. 用'扑通'

   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 应该是:

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

目前您似乎正在尝试附加 input 元素，因此 youtube 正在搜索 'object' ，正如您从结果中看到的那样。要解决此问题，您必须添加 .val() 以获取文本框中的值。

希望这对您有所帮助!