[英]HTML and Javascript search result pagination - limit the number of result pages showing
[英]Javascript/API - Search result not showing
我是使用API的新手。
我的問題:看起來我的代碼在某處不正確。 搜索無效。
如何獲得用戶搜索的特定搜索結果?
到Giphy API的GitHub鏈接在這里: https : //github.com/Giphy/GiphyAPI 。
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
var searchTerm = prompt('Please enter a word :)');
searchTerm = searchTerm.trim().replace(/ /g, "+"); // adds a + wherever a space is
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=' + searchTerm + '&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');
}
jQuery(function(){
$("#form-value").keyup(function() {
var searchTerm = $("#form-value").val().trim().toLowerCase();
$("#here_is_gif").text(value);
});
});
};
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>
因此,問題在於您沒有通過返回數據使用正確的對象路徑:
data = JSON.parse(request.responseText).data;
if(data.length > 0) {
document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data[0].images.original.url+'" title="GIF via Giphy"></center>'; // use the first image returned... But data is an array, so you might want to loop over it and add more than one image....
}
另外,您在這里有錯別字:
$("#here_is_gif").text(value); // should be $("#here_is_gif").text(searchTerm);
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.