我的问题: 看起来我的代码在某处不正确。搜索不起作用。我是使用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>
答案 0 :(得分:2)
这是jQuery的解决方案。 欲了解更多信息,请参阅他们的文档...... http://api.jquery.com/
另请注意,Giphy API会回复图像的URL,而不是图像本身。因此,<img>
标记替换了您最初使用的<p>
。使用src
属性使用网址呈现图片。
检查浏览器的控制台日志,了解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>
答案 1 :(得分:1)
提取用户输入后,您可以输入变量...
您的API链接(此处复制)只是搜索&#34;有趣的猫&#34;。
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。