时间戳

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

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

问题描述

我在一个 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);
    }
}

标签： javascripthtmlformsapi

解决方案

我需要修改代码中的几处（也有小错误）。但我设法用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>

享受 ！

推荐阅读