搜索结果不会自动显示
搜索结果不会自动显示
提问于 2017-07-21 02:18:09
我通过Giphy API构建了一个giphy Gif搜索应用程序，每次当我试图在搜索文本中输入新内容时，它都工作得很好，除非我重新加载页面，否则新的搜索结果不会弹出。
HTML代码如下：
<html>
<head>
<title>My Giphy Search App</title>
<style>
.container-image {
width: 30%;
display: inline-block;
float: left;
margin-right:3%;
}
</style>
</head>
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="refresh the page if you wanna searching more">
<button class="js-go container-button">Go!</button>
</div>
<div class="js-container">
</div>
<script src ="javascript/main.js"></script>
</body>
main.js文件中的js代码如下：
document.querySelector(".js-go").addEventListener("click",function(e){
var input = document.querySelector("input").value;
searchGiphy(input);
});
document.querySelector(".js-userinput").addEventListener("keyup",function(e){
var input = document.querySelector("input").value;
if(e.which == 13){
searchGiphy(input);
}
});
function searchGiphy(searchResult){
var url = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchResult;
var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open("GET",url);
GiphyAJAXCall.send();
GiphyAJAXCall.addEventListener("load",function(e){
var data = e.target.response;
pushToDOM(data);
});
}
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">";
});
}我粘贴了上面所有的js代码，想知道这里的ajax调用是不是错了？有人能帮我一下吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-21 02:26:51
您正在将结果追加到当前html的末尾，而不是替换已存在的内容。相反，使用另一个变量来构建您正在构造的新html字符串，然后在构建完成后，用新字符串替换容器的innerHTML。
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
var html = "";
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
html += "<img src=\"" + src + "\" class=\"container-image\">";
});
container.innerHTML = html;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45222378
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号