如何使用url API从输入中搜索图像，使用javascript并显示到html页面？

Question

我在一个html页面中创建了一个输入和一个按钮。 从那个输入我想“获取”文本并使用url API来搜索gif。 之后，我想将所有src图像复制到我的html页面以显示那里的GIF。

<!doctype html>
<html lang="en">
<head>
    <title>Load gif and images</title>
    <!--CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Search for gifs</h1>
    </header>
    <!--Section with input for search-->
    <section id="for-search">
        <form action="javascript: main.js;" onsubmit="return searchgif()">
            <input type="text" name="search" placeholder="type your text here" class="search" id="search">
            <button class="submit">SUBMIT</button>
        </form>
    </section>
    <!--END search section-->
    <!--Section to display gifs for searched word-->
    <section id="layout">
        <div id="result">
            <img id="gif"></img>
        </div>
    </section>
    <!--END display section-->
    <!-- JavaScript -->
    <script src="main.js"></script>
</body>
</html>

//Main JS to search and display GIFS 
function serchgif() {
    var url = "https://b682nc9ec1.execute-api.us-east-1.amazonaws.com/dev/giphy/search?search=";
    var searched = document.getElementById("search").value;
    var api = url+searched;
    var firstres = api.replace(/[|]|"/g, "");
    var res = firstres.split(",");
    var image = document.getElementById("gif")
    var imgatt = document.createAttribute("src");
    var i;
    for (i = 0; i <= res.length; i++) {
        imgatt.value = res[i];
        image.setAttributeNode(imgatt);
    }
}

Answer 1

我需要在代码中修改几个东西（小错误）。 但我设法实现了你想用fetch做的事情。

 buttonEL = document.getElementById("button"); resultEL = document.getElementById("result"); buttonEL.addEventListener("click", searchgif); function searchgif() { var url = "https://b682nc9ec1.execute-api.us-east-1.amazonaws.com/dev/giphy/search?search="; var searched = document.getElementById("search").value; var api = url + searched; var firstres = api.replace(/[|]|"/g, ""); var res = firstres.split(","); fetch(res, {method: 'GET', headers: {Accept: 'application/json'} }) .then(function(response) { response.json() .then(function(text) { for ( let i = 0; i <= text.length - 1 ; i++) { var img = document.createElement("img"); img.setAttribute("src", text[i]); resultEL.appendChild(img); } }); }); }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Load gif and images</title> </head> <body> <header> <h1>Search for gifs</h1> </header> <!--Section with input for search--> <section id="for-search"> <form> <input type="text" name="search" placeholder="type your text here" class="search" id="search"> </form> <button id="button">SUBMIT</button> </section> <!--END search section--> <!--Section to display gifs for searched word--> <section id="layout"> <div id="result"> </div> </section> <!--END display section--> </body> </html>

请享用！

如何使用url API从输入中搜索图像，使用javascript并显示到html页面？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-06-11 17:43:31

如何使用url API从输入中搜索图像，使用javascript并显示到html页面？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-06-11 17:43:31

解决方案1
0 已采纳 2019-06-11 17:43:31