使用 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>
WordPress建站解决方案：WordPress企业建站
Internet Explorer 今天仍然没有消失
搜索引擎优化工具
