Question

这是标记

<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>

它仍然说$没有定义，最重要的是 “的console.log（数据）;”这是我如何从搜索youtube api加载数据，这应该是控制台日志，但也无法正常工作请帮忙，谢谢......

Answer 1

除非另行指定，否则JS文件将在浏览器中同步加载。这意味着，如果您需要在自定义JS文件中使用jQuery，则需要在加载JS文件之前导入它。如果您按如下方式更改文件的导入顺序，您的代码将获得jQuery：

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

Answer 2

这里是Plunker中的工作代码，您可以找到索引和脚本文件。
PS：你需要更改api密钥

的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>

的script.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);   }); }

Answer 3

<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>
    <script src="script.js"></script>

在jquery之后使用script.js

即使在添加链接和youtube api无法正常工作后，也未定义$

3 个答案: