GIPHY API - 如何搜索Giphs？

我的問題：看起來我的代碼在某處不正確。搜索不起作用。我是使用API的新手。GIPHY API - 如何搜索Giphs？

如何獲取用戶搜索的特定搜索結果？

GitHub鏈接到Giphy API在這裏：https://github.com/Giphy/GiphyAPI。

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>

來源

2017-01-12 spidey677

一旦用戶輸入被提取，你可以把到一個變量...

你的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做了project。

來源

2017-01-12 19:14:03

我仍然無法得到它的工作。你能幫我多一點嗎？ – spidey677

你是否必須使用'request = new XMLHttpRequest;'？ –

還是你打開使用jQuery？ –

以下是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-15 07:08:46

太好了，謝謝！ –

GIPHY API - 如何搜索Giphs？

回答

相關問題