Having trouble using the ajax call with my giphy api

Question

Having trouble using the ajax call with my giphy api

226 Views Asked by Iroos At 02 November 2025 at 09:17

I am very new to using jQuery and js. What I'm trying to do with the ajax or get method is that I want to type in any keyword(such as maine coon for example), click submit and be able to see a page of maine coon gifs. The api code I have is from 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/[email protected]/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>

Original Q&A

There are 1 best solutions below

**Rory McCrossan** · Accepted Answer

There's quite a few issues here:

You cannot have spaces in id attributes, nor can you have multiple values in a single id. Use class attributes for that.
Your $.get() syntax is wrong; there's extra {} characters which are not necessary and causing an error
Document.GetElementById() needs to be document.getElementById() - JS is case sensitive
Element objects do not have a val() method, that's only available on a jQuery object
You're using the 'slim' branch of jQuery which does not have AJAX methods (amongst others). Use the full version of jQuery.
The 'search' input is missing the #search id you reference in the JS to get its value
The function you create is named searchGif(), not getData() as you use in the onclick attribute of the HTML.
That said, do not use onX event attributes as they are outdated and no longer good practice. Attach your event handlers unobtrusively instead.
There may not always be 21 items or more in the response, so remove [20] and use either [0] to get the first item only, or loop through them all.

With all that said, here's a working example:

$('#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/[email protected]/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>

Having trouble using the ajax call with my giphy api

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in GET

Related Questions in GIPHY-API

Trending Questions

Popular # Hahtags

Popular Questions