2017-01-12 7 views
0

Giphy APIへのGitHubリンクは、https://github.com/Giphy/GiphyAPIです。Giphy API - 検索結果から画像を表示するにはどうすればよいですか?

私の問題:私が新しいので、今はちょっと固まっています。私はgiphy APIからランダムなgifを取得していますが、ユーザーが望む特定の検索結果ではありません。

ランダムなgifの代わりに、ユーザーが望む特定の検索結果を取得するにはどうすればよいですか?あなたのJSで

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> 

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.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(); 
}); 

答えて

0

あなたはランダムな結果を要求する代わりに、テキストによる検索を行っているスニペット。 (request.open:あなたの要求内のURLは代わりねえ、このようなコードの私のスニペットを書いた

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC 
+0

(giphyドキュメントから取られた)のようなものの

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag= 

を(ランダムなキーワードに注目してください)です'GET'、 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');動作しません。 – spidey677

+0

request.open( 'GET'、 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC'); は動作しません – spidey677

+0

「動作しません」とはどういう意味ですか?あなたはまだランダムな画像を取得していますか? – Gnomo

関連する問題