Проблемы с использованием вызова ajax с моим API-интерфейсом giphy - PullRequest
Новая
       24

Проблемы с использованием вызова ajax с моим API-интерфейсом giphy

1 голос
/ 14 июля 2020

Я новичок в использовании jQuery и js. Что я пытаюсь сделать с помощью метода ajax или get, так это то, что я хочу ввести любое ключевое слово (например, мейн-кун), нажать «Отправить» и увидеть страницу с гифками мейн-кунов. Код 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>

1 Ответ

0 голосов
/ 14 июля 2020

Здесь довольно много проблем:

  • У вас не может быть пробелов в атрибутах id, а также у вас не может быть несколько значений в одном id. Используйте для этого атрибуты class.
  • Ваш синтаксис $.get() неверен; есть дополнительные символы {}, которые не являются необходимыми и вызывают ошибку
  • Document.GetElementById() должно быть document.getElementById() - JS с учетом регистра
  • Объекты элементов не имеют val() метод, который доступен только для объекта jQuery
  • Вы используете «тонкую» ветвь jQuery, в которой нет методов AJAX (среди прочих). Используйте полную версию jQuery.
  • В 'search' input отсутствует #search id, на который вы ссылаетесь в JS, чтобы получить его значение
  • Созданная вами функция называется searchGif(), а не getData(), как вы используете в атрибуте onclick для HTML.
  • Тем не менее, не используйте атрибуты события onX, поскольку они устарели и больше не подходят практика. Вместо этого прикрепите обработчики событий ненавязчиво.
  • В ответе не всегда может быть 21 элемент или больше, поэтому удалите [20] и используйте либо [0], чтобы получить только первый элемент, либо l oop через их все.

С учетом всего сказанного, вот рабочий пример: 

$('#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...