Question

好的，所以我一直得到这个ajax错误，我不知道为什么。如果我删除代码部分，则按钮加载。我之前使用过相同的代码，从未遇到任何问题。

任何帮助都会很棒。

到目前为止我做了什么：

查找＆＃34; Uncaught TypeError：$ .ajax不是函数＆＃34;在堆栈中看看我的链接，以确保它们不是原因。
检查我是否在页面加载后加载代码（window.onload）。
回到原来的代码，这是为了看看我是否改变了一些东西，我没有。
Google搜索。

注意：我删除了此代码中的API密钥，但我确实在我的本地有一个有效的密钥（测试它以确保它有效并且确实有效）。

HTML：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GIFtastic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Reset style-->
    <link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/reset.css" />
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <!-- My own CSS stylesheet -->
    <link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/style.css">
    <!--JavaScript-->
    <script src="../GIFtastic/assets/javascript/app.js"></script>
</head>

<body>

    <div id="dogBtns"></div>    



    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <!-- Bootstrap CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!--popper-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
</body>

</html>

JS：

/*jshint esversion: 6 */
window.onload = function () {
    //1. Before you can make any part of our site work, you need to create an array of strings, each one related to a topic that interests you. Save it to a variable called `topics`.
    //    * We chose animals for our theme, but you can make a list to your own liking.
    var topics = ["Collie", "German Shepherd", "Bernese Mountain Dog", "Australian Shepherd", "Golden Retriever", "Siberian Husky", "Border Collie"];
    var resultNum = 9;

    // 2. Your app should take the topics in this array and create buttons in your HTML.
    // * Try using a loop that appends a button for each string in the array.

    function createTopicBtns() {
        var topicBtns = $("#dogBtns");
        for (i = 0; i < topics.length; i++) {
            var newTopicBtns = $("<button>" + topics[i] + "</buttons>");
            newTopicBtns.attr({
                "type": "button",
                "class": "btn btn-outline-secondary active m-2",
                "data-name": topics[i],
                "text": topics[i]
            });
            console.log(newTopicBtns);
            topicBtns.append(newTopicBtns);
        }
    }

    /*3. When the user clicks on a button, the page should grab 10 static, non-animated gif images from the GIPHY API and place them on the page.
    */

    var queryURL = "https://api.giphy.com/v1/gifs/search?q=collie&api_key=<apiKey>";

    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function (response) {
        console.log(response);
    });



        /*When the user clicks one of the still GIPHY images, the gif should animate. If the user clicks the gif again, it should stop playing.
        */

        /*Under every gif, display its rating (PG, G, so on).*/

        /*This data is provided by the GIPHY API.
        Only once you get images displaying with button presses should you move on to the next step.
        Add a form to your page takes the value from a user input box and adds it into your topics array. Then make a function call that takes each topic in the array remakes the buttons on the page.
        */

        createTopicBtns();


    //window on load end    
};

Answer 1

您在javascript代码后面包含了jquery代码。这样做会导致javascript在jquery运行之前运行，从而使$未定义。将您的库移到标题中，然后在app.js之前解决问题。

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>GIFtastic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--Reset style-->
  <link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/reset.css" />
  <!--Bootstrap-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
  <!-- My own CSS stylesheet -->
  <link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/style.css">

  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <!-- Bootstrap CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <!--popper-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>

  <!--JavaScript-->
  <script src="../GIFtastic/assets/javascript/app.js"></script>
</head>

对此错误有任何建议吗？未捕获的TypeError：$ .ajax不是函数

1 个答案: