文章/答案/技术大牛

发布

社区首页 >问答首页 >在我的giphy中使用ajax调用有困难

问在我的giphy中使用ajax调用有困难
EN

Stack Overflow用户

提问于 2020-07-14 12:49:05

回答 1查看 170关注 0票数 2

我对使用jQuery和js非常陌生。我试图使用ajax或get方法输入任何关键字(例如缅因州茧)，单击submit，然后能够看到缅因州茧gifs的页面。我所拥有的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>

javascript

jquery

ajax

get

giphy-api

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-14 13:11:29

这里有很多问题：

您不能在id属性中有空格，也不能在单个id中有多个值。使用error
Document.GetElementById()属性。使用class属性。
您的$.get()语法是错误的；还有额外的{}字符是不必要的，导致需要使用AJAX - JS是sensitive
Element对象没有val()方法的情况，这只能在jQuery object
You're上使用jQuery的'slim‘分支，后者没有AJAX方法(等等)。使用jQuery.
的完整版本'search‘input缺少您在JS中引用的#search id以获得它的值
，您创建的函数名为searchGif()，而不是在HTML的onclick属性中使用的getData()。H 227>H 128也就是说，不要使用onX事件属性，因为它们已经过时，不再有良好的实践了。将事件处理程序不突出地附加到响应中，instead.
There可能并不总是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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62895597

复制

相似问题

问在我的giphy中使用ajax调用有困难
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我的giphy中使用ajax调用有困难EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在我的giphy中使用ajax调用有困难
EN