在我的 giphy api 中使用 ajax 调用时遇到问题

Question

我对使用 jQuery 和 js 很陌生。我想用 ajax 或 get 方法做的是我想输入任何关键字（例如 maine coon），单击提交并能够看到一页 maine coon gif。我的 api 代码来自 giphy。

function searchGif (){
        var input = Document.GetElementById("Search_Form");
        input.val();
            var input = $('#search').val();
            $.get('http://api.giphy.com/v1/gifs/search?q='+input+'&api_key=apikey&limit=20',function(response)
            {
                $('#img').html("<img src="+response.data[20].images.downsized_large.url+">")
            }
            )
        }
        $.get({'http://api.giphy.com/v1/gifs/search?q='+input+'&api_key=apikey&limit=20',function(response)
        {
            $('#img').html("<img src="+response.data[20].images.downsized_large.url+">")
        }
    })
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/style1.css" />
    <script src="scripts/script1.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    
    
    <title>API Test</title>
</head>
<body>
   
    <input id="form-control mr-sm-2" type="search" placeholder="Search">  
    <button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit" onclick="getData()">Search</button>
    </action>
    

   <br> 
   <br>
<script></script>
<!--<div class="inner">
    <img src="https://media3.giphy.com/media/hRPoV9O14t3vW/giphy.gif" />
    <img src="https://media1.giphy.com/media/GBbkH7cJiVu9y/giphy.gif" />
    <img src="https://media1.giphy.com/media/HXpzpXB5syQGQ/giphy.gif" />
    <img src="https://media0.giphy.com/media/X9Y9qYPUp1VMQ/giphy.gif" />
    <img src="https://media0.giphy.com/media/uuocoePH1mkVy/giphy.gif" />
    <img src="https://media0.giphy.com/media/4ml290TZ35zOM/giphy.gif" />
    <img src="https://media1.giphy.com/media/8O6EY0lahfInC/giphy.gif" />
    <img src="https://media3.giphy.com/media/A7GowSMfBhq6Y/giphy.gif" />
    <img src="https://media1.giphy.com/media/dQxSeXsXtf2Lu/giphy.gif" />
    <img src="https://media1.giphy.com/media/PzrPi0UVzgYHm/giphy.gif" />
    
</div>-->
   
</body>
</html>

Answer 1

这里有很多问题：

id 属性中不能有空格，单个 id 中也不能有多个值。为此使用 class 属性。
您的 $.get() 语法错误；有多余的 {} 个不必要的字符，会导致错误
Document.GetElementById() 需要 document.getElementById() - JS 区分大小写
元素对象没有 val() 方法，该方法仅适用于 jQuery 对象
您正在使用 jQuery 的 'slim' 分支，它没有 AJAX 方法（以及其他方法）。使用完整版 jQuery.
'search' input 缺少您在 JS 中引用以获取其值的 #search id
您创建的函数名为 searchGif()，而不是您在 HTML.

onclick

getData()

也就是说，不要使用 onX 事件属性，因为它们已经过时并且不再是好的做法。而是以不显眼的方式附加您的事件处理程序。
响应中可能并不总是有 21 个或更多项，因此删除 [20] 并使用 [0] 仅获取第一个项目，或者循环遍历所有项目。

综上所述，这是一个工作示例：

$('#searchgifs').on('click', function() {
  var input = $('#search').val();      
  $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=20', function(response) {
    $('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="cat">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>

<div id="img"></div>

在我的 giphy api 中使用 ajax 调用时遇到问题

Having trouble using the ajax call with my giphy api

javascript

jquery

ajax

get

giphy-api