Question

我已经通过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错了吗？有人可以帮我这个吗？

Answer 1

您将结果附加到当前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;
}

搜索结果不会自动显示

1 个答案: