admin管理员组文章数量:1026669
My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.
How can I get the specific search result that the user searches for?
GitHub link to the Giphy API is here: .
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
request = new XMLHttpRequest;
//request.open('GET', ';tag='+q, true);
request.open('GET', '+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>
My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.
How can I get the specific search result that the user searches for?
GitHub link to the Giphy API is here: https://github./Giphy/GiphyAPI.
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
request = new XMLHttpRequest;
//request.open('GET', 'http://api.giphy./v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);
request.open('GET', 'http://api.giphy./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>
2 Answers
Reset to default 2Here is a solution with jQuery. For more info please refer to their docs... http://api.jquery./
Also note that the Giphy API replies back with a URL to an image, not an image itself. Hence, the <img> tag replaced the <p> you originally used. Use src attribute to render an image with the url.
Check your browser's console log to see how the API response looks.
Below is the full HTML, note that jQuery must always be linked in above your code.
<!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./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./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>Once the user input is extracted, you can put in into a variable...
Your API Link (copied here) is just searching for "funny cat".
request.open('GET', 'http://api.giphy./v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');
You can fix this by doing something like this...
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./v1/gifs/search?q=' + searchTerm + '&api_key=dc6zaTOxFJmzC');
Since, I'm not sure if you pasted all of the all the code you are using, I only demoed how you can substitute a phrase like funny+cat into a variable called searchTerm.
In order to pull the user's input out of the <input> field, you use jQuery and then pass it into your search term variable.
Oddly enough, I've done a project with the Giphy API.
My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.
How can I get the specific search result that the user searches for?
GitHub link to the Giphy API is here: .
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
request = new XMLHttpRequest;
//request.open('GET', ';tag='+q, true);
request.open('GET', '+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>
My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.
How can I get the specific search result that the user searches for?
GitHub link to the Giphy API is here: https://github./Giphy/GiphyAPI.
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
request = new XMLHttpRequest;
//request.open('GET', 'http://api.giphy./v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);
request.open('GET', 'http://api.giphy./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>
2 Answers
Reset to default 2Here is a solution with jQuery. For more info please refer to their docs... http://api.jquery./
Also note that the Giphy API replies back with a URL to an image, not an image itself. Hence, the <img> tag replaced the <p> you originally used. Use src attribute to render an image with the url.
Check your browser's console log to see how the API response looks.
Below is the full HTML, note that jQuery must always be linked in above your code.
<!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./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./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>Once the user input is extracted, you can put in into a variable...
Your API Link (copied here) is just searching for "funny cat".
request.open('GET', 'http://api.giphy./v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');
You can fix this by doing something like this...
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./v1/gifs/search?q=' + searchTerm + '&api_key=dc6zaTOxFJmzC');
Since, I'm not sure if you pasted all of the all the code you are using, I only demoed how you can substitute a phrase like funny+cat into a variable called searchTerm.
In order to pull the user's input out of the <input> field, you use jQuery and then pass it into your search term variable.
Oddly enough, I've done a project with the Giphy API.
本文标签： javascriptGIPHY APIHow do I search for GiphsStack Overflow
版权声明：本文标题：javascript - GIPHY API - How do I search for Giphs? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745650050a2161263.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论