用于执行 YouTube 搜索并向控制台返回 JSON 响应的 JS 代码
Posted
技术标签:
【中文标题】用于执行 YouTube 搜索并向控制台返回 JSON 响应的 JS 代码【英文标题】：JS code to conduct a YouTube search and return a JSON response to the console 【发布时间】：2021-02-27 18:10:13 【问题描述】：我正在使用 JS、JQuery、Bootstrap 和 html 编写应用程序。该应用程序的目标是对用户输入的关键字进行 YouTube 搜索，并向控制台返回 JSON 响应，提供有关搜索中出现的视频的详细信息。
我正在关注this 教程，在教程的这一点上，我应该能够在控制台中看到运行代码时的 JSON 响应。但是，当我在 Firefox 上运行代码时，出现以下错误：
解析“-webkit-text-size-adjust”值时出错。宣言 掉了。 _reboot.scss:28:2 未知的伪类或伪元素 “焦点可见”。由于选择器错误，规则集被忽略。 bootstrap.css:66 未知的伪类或伪元素“-ms-expand”。 由于选择器错误，规则集被忽略。 _forms.scss:7 未知 伪类或伪元素“-ms-input-placeholder”。规则集 由于选择器错误而被忽略。 _forms.scss:7 未知的伪类或 伪元素“-ms-input-placeholder”。由于错误而忽略了规则集 选择器。 _forms.scss:7 未知的伪类或伪元素 “-ms-值”。由于选择器错误，规则集被忽略。 _forms.scss:71 未知的伪类或伪元素“-ms-value”。规则集被忽略 由于选择器错误。 _custom-forms.scss:220 未知的伪类或 伪元素“-ms-expand”。由于选择器错误，规则集被忽略。 _custom-forms.scss:220 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-track”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-fill-lower”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-fill-upper”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。 _custom-forms.scss:382 未知属性“孤儿”。声明被放弃。 _card.scss:252:4 未知属性“寡妇”。宣言 掉了。 _card.scss:243 未知属性“孤儿”。宣言 掉了。 _print.scss:76:6 未知属性“寡妇”。宣言 掉了。 _print.scss:79:4 未知属性“大小”。宣言 掉了。 _reboot.scss:46
当我在 Chromium 上运行它时，我没有收到任何错误，但也没有控制台输出。
这是我的代码：
$(document).ready(function()
var API_KEY = "AIzaSyCzpZZP564ykVqpun38mS0AbtR0cHoEYE0";
$("#form").submit(function(event)
event.preventDefault()
alert("submitted")
var search = $("#search").val()
videoSearch(API_KEY,search,10)
)
function videoSearch(key,search,maxResults)
$.get("https://www.googleapis.com/youtube/v3/search?key=" + key
+ "&type=video&part=snippet&maxResults=" + maxResults + "&q="
+ search, function(data)
console.log(data)
)
)<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>YouTube Video Search</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" id="search">
</div>
<div class="form-group">
<input type="submit" class="btn btn-danger" value="Search">
</div>
</form id="form">
</div>
<div class="row">
<div class="col-md-12">
<div id="videos">
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="youtube.js"></script>
</html>我做了一些研究，我怀疑 Firefox 中的错误部分是由于浏览器的特殊性。但是，我也无法在 Chromium 中获得预期的结果，这让我认为问题肯定还有更多。我无法使用 Chrome 进行检查，因为我的计算机不支持 Chrome。我真的很感谢任何帮助找出问题所在。
【问题讨论】：
这能回答你的问题吗？ Bootstrap 3.3.6 warnings and errors in bootstrap.min.css</form id="form">
哦，哇，我真笨，非常感谢！现在可以了。
【参考方案1】：
正如 Guy Incognito 指出的那样，“id="form">
【讨论】：
以上是关于用于执行 YouTube 搜索并向控制台返回 JSON 响应的 JS 代码的主要内容，如果未能解决你的问题，请参考以下文章
在 YouTube 上搜索并返回 Python 中的所有链接