使用 HTML、jQuery、AJAX、Unsplash Api 构建图像搜索网站

2022/06/23
使用 HTML、jQuery、AJAX、Unsplash Api 构建图像搜索网站

在这里,我使用 HTML、Bootstrap、jQuery、AJAX 和 unsplash API 制作了图像搜索应用程序

它可以渲染来自 unsplash 网站的图像。

源代码

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search Application</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center py-4">Image Search Application</h1>
        <div class="form-group">
            <input type="text" name="" id="search" placeholder="Search Images" class="form-control" autocomplete="off">
        </div><br>
        <div class="form-group">
            <button class="btn btn-success" id="button">Search Images</button>
        </div>
        <div id="result"></div>
    </div>

</body>
</html>

CSS的引导链接:

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We” crossorigin=”anonymous”>

jQuery链接:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

您需要从 unsplash 官方网站获取您自己的客户端 ID 以获取 api 密钥,您需要前往
Usnplash 开发者页面
打开链接并在那里注册并点击新应用并制作新应用!在此处填写您的应用程序名称和详细信息并获取您的访问 ID。

我们的应用程序的主要脚本代码:

$(“button”).click(function(event){
event.preventDefault()
$(“#result”).empty()
var search=$(“#search”).val()
var url=”https://api.unsplash.com/search/photos?query=”+search+”&client_id={YOUR_CLIENT_ID}&per_page=60″

$.ajax({
method: ‘GET’,
url: url,
success:function(data){
console.log(data)

data.results.forEach(photo => {
$(“#result”).append(`
<img src=”${photo.urls.small}” />
`)
});
}
})
})

完整源代码:

<!DOCTYPE html>
<html lang=”en”>
<head>
<style>
body{
height: 100vh;
width: 100vw;
display: grid;
justify-content: center;
overflow-x: hidden;

}
img{
height: 250px;
width: 370px;
margin: 10px;
border-radius: 3px;
}
#result{
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
margin-left: -155px;
margin-top: 25px;
}
input{
/* position: absolute; */
/* margin-left: -355px; */
width: 70vw !important;
}
</style>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We” crossorigin=”anonymous”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image Search Application</title>
</head>
<body>
<div class=”container”>
<h1 class=”text-center py-4″>Image Search Application</h1>
<div class=”form-group”>
<input type=”text” name=”” id=”search” placeholder=”Search Images” class=”form-control” autocomplete=”off”>
</div><br>
<div class=”form-group”>
<button class=”btn btn-success” id=”button”>Search Images</button>
</div>
<div id=”result”></div>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js” integrity=”sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj” crossorigin=”anonymous”></script>

<script>
$(“button”).click(function(event){
event.preventDefault()
$(“#result”).empty()
var search=$(“#search”).val()
var url=”https://api.unsplash.com/search/photos?query=”+search+”&client_id={YOUR_ACCESS_ID}&per_page=60″

$.ajax({
method: ‘GET’,
url: url,
success:function(data){
console.log(data)

data.results.forEach(photo => {
$(“#result”).append(`
<img src=”${photo.urls.small}” />
`)
});
}
})
})
</script>
</body>
</html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注