0

我的问题：看起来我的代码在某处不正确。搜索不起作用。我是使用 API 的新手。

如何获取用户搜索的具体搜索结果？

Giphy API 的 GitHub 链接在这里：https ://github.com/Giphy/GiphyAPI 。

JS

document.addEventListener('DOMContentLoaded', function () {

//q = "";

request = new XMLHttpRequest;
//request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);
request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');


request.onload = function() {
    if (request.status >= 200 && request.status < 400){
        data = JSON.parse(request.responseText).data.image_url;
        console.log(data);
        document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center>';
    } else {
        console.log('reached giphy, but API returned an error');
     }
};

request.onerror = function() {
    console.log('connection error');
};

request.send();
});

HTML

<h1> Let's Search Some Gifs! </h1>
<div class="info">
    <p> Search below to the wonderful world of Gifs! </p>
        <form class="gif-form">
            <input type="text" id="form-value" class="search-input-rounded">
            <button type="submit" class="search_button"> Search for GIFs </button>
            <input type="reset" value="Reset">
        </form>
        <div class="rando_facts animated bounceIn">
            <p id="here_is_gif"> </p>
        </div>
</div>
4

2 回答 2

2

这是使用 jQuery 的解决方案。有关更多信息，请参阅他们的文档... http://api.jquery.com/

另请注意，Giphy API 回复的是图像的 URL，而不是图像本身。因此，该<img>标签替换了<p>您最初使用的标签。使用src属性来渲染带有 url 的图像。

检查浏览器的控制台日志以查看 API 响应的外观。

下面是完整的 HTML，请注意 jQuery 必须始终链接在您的代码上方。

<!DOCTYPE html>
<html>
<head>
  <title>Giphy App</title>
</head>
<body>
  <h1> Let's Search Some Gifs! </h1>
  <div class="info">
    <p> Search below to the wonderful world of Gifs! </p>
      <form class="gif-form">
        <input type="text" id="form-value" class="search-input-rounded">
        <button type="submit" class="search_button"> Search for GIFs </button>
        <input type="reset" id="reset_button" value="Reset">
      </form>
      <div class="rando_facts animated bounceIn">
        <img id="here_is_gif" src=""/>
      </div>
  </div>

  <!-- Link in jQuery from CDN -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <!-- My JavaScript -->
  <script type="text/javascript">

    // This waits for the page to load before calling our jQuery
    $( document ).ready(function(){

      // Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
      $('.search_button').on('click', function(){

        // Collect user by grabbing the input form's value via id (#)
        var userInput = $('#form-value').val().trim();
        
        // Change the input to suit the API (ie change spaces to +)
        userInput = userInput.replace(/ /g, "+");

        // Create the Giphy API URL
        var queryURL = 'http://api.giphy.com/v1/gifs/search?q=' + userInput + '&api_key=dc6zaTOxFJmzC';

        // Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
        $.ajax({url: queryURL, method: 'GET'}).done(function(response){

          // This is the API response data. It's a JSON object of 25 gifs
          console.log(response.data);

          // For simplicity, we will take the first gif (ie. at postion 0)
          var giphyURL = response.data[0].images.fixed_height.url;
          console.log(giphyURL)

          // Now you can pass that into your "here_is_gif" <img> tag using its id (#)
          $('#here_is_gif').attr('src', giphyURL);

        });

        // Part 3 - Clear the Gif using the reset_button id (#)
        $('#reset_button').on('click', function(){
          // Grab the img using the id and change the src to empty to remove the image
          $('#here_is_gif').attr("src",'');
        })


        // If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
        return false;
      })
      

    });

  </script>

</body>
</html>

于 2017-01-15T07:08:46.953 回答
1

提取用户输入后，您可以将其放入变量...

您的 API 链接（在此处复制）只是在搜索“有趣的猫”。 request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');

你可以通过做这样的事情来解决这个问题......

var searchTerm = prompt('Add your search term here'); searchTerm = searchTerm.trim().replace(/ /g, "+"); // adds a + wherever a space is request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=' + searchTerm + '&api_key=dc6zaTOxFJmzC');

因为，我不确定你是否粘贴了所有正在使用的代码，所以我只演示了如何将短语替换为funny+cat名为searchTerm.

为了从<input>字段中提取用户的输入，您使用 jQuery，然后将其传递到您的搜索词变量中。

奇怪的是，我用 Giphy API做了一个项目。

于 2017-01-12T19:14:03.383 回答