gpt4 book ai didi

javascript - 即使添加链接后 $ 也未定义并且 youtube api 不起作用

转载 作者:行者123 更新时间:2023-12-01 03:16:00 24 4
gpt4 key购买 nike

这是标记

<html>
<head>
<title>Youtube App</title>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Up<span></h1>
<p>Search all Youtube videos</p>
</header>
<section>
<form id="searchForm" name="searchForm" onsubmit="return search()">
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search Youtube...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright &copy; 2017, All Rights Reserved</p>
</footer>
</body>
</html>

这是脚本

$(function(){   
$('searchForm').submit(function(e){
e.preventDefault();
});
});
function search(){
//clear results
$('#results').html('');
$('#buttons').html('');

//Get Form Input
q = $('#query').val();

//Run GET Requests on API
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part: 'snippet, id',
q: q,
type: 'video',
key: '123'},
function(data){
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;

console.log(data);
}
)
}

问题是即使我已经给出了链接

<script src="script.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

它仍然说 $ 未定义,最重要的是 “控制台.日志(数据);”这就是我从 youtube api 的搜索中加载数据的方式,它应该控制台日志,但也不起作用请帮忙,谢谢...

最佳答案

这是 Plunker 中的工作代码,您可以找到索引和脚本文件。
PS:您需要更改api key

index.html

<html>
<head>
<title>Youtube App</title>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Up<span></h1>
<p>Search all Youtube videos</p>
</header>
<section>
<form id="searchForm" name="searchForm" >
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search Youtube...">
<input type="button" name="search-btn" id="search-btn" value="submit" onclick="search()">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright &copy; 2017, All Rights Reserved</p>
</footer>
</body>
</html>

脚本.js

function search(){

//clear results
$('#results').html('');
$('#buttons').html('');

//Get Form Input
q = $('#query').val();

//Run GET Requests on API
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part: 'snippet, id',
q: q,
type: 'video',
key: '!!your api key!!!'},
).done(function( data ) {
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;



var jsonPretty = JSON.stringify(data, null, '\t');

$("#results").html(jsonPretty);

console.log(data); }); }

关于javascript - 即使添加链接后 $ 也未定义并且 youtube api 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45531267/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com