js实现城市广场查询及渲染axios(需axios.min.js)

2023-12-30 05:13:11

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <link rel="stylesheet" href="css/bootstrap.min.css">
? ? <style>
?? ?
? ? ? ? .nav{
? ? ? ? ? ? display: flex;
? ? ? ? ? ? margin: 20px;
? ? ? ? }
? ? ? ? .nav .form-control{
? ? ? ? ? ? width: 300px;
? ? ? ? }
? ? ? ?.nav .btn{
? ? ? ? ? ? width: 80px;
?? ??? ??? ?height: 40px;
? ? ? ? ? ? margin-left: 10px;
? ? ? ? }
?? ??? ?#btn{
?? ??? ? ? ?margin: 20px;
?? ??? ?}
?? ??? ?.card{
?? ??? ? ? ?margin: 20px;
?? ??? ? ? ?padding: 10px;
?? ??? ? ? ?float: left;
?? ??? ? ? ?height: 430px;
?? ??? ?}
?? ??? ?.card img{
?? ??? ? ? ?height: 230px;
?? ??? ?}
?? ??? ?.card h5{
?? ??? ? ? ?font-weight: normal;
?? ??? ? ? ?font-size: 16px;
?? ??? ?}
?? ??? ?.card .card-text{
?? ??? ? ? ?color: red;
?? ??? ?}
?? ??? ?.hide{
?? ??? ? ? ?/* 英文换行 */
?? ??? ? ? ?word-break: break-all;
?? ??? ? ? ?/* 溢出隐藏 */
?? ??? ? ? ?overflow: hidden;
?? ??? ? ? ?/* 弹性盒兼容写法 */
?? ??? ? ? ?display: -webkit-box;
?? ??? ? ? ?/* 出现几行省略号 */
?? ??? ? ? ?-webkit-line-clamp: 2;
?? ??? ? ? ?/* 行与行之间是垂直排列的 */
?? ??? ? ? ?-webkit-box-orient: vertical;
?? ??? ?}
?? ??? ?
? ? </style>
</head>
<body>
? ? <div class="nav">
? ? ? ? <input type="text" class="form-control" autocomplete="off">
? ? ? ? <button type="button" class="btn btn-primary">查询</button>
?? ?
? ? </div>
?? ??? ?<div class="active"></div>
? ? <script src="./js/axios.min.js"></script>
? ? <script>
? ? ? ? const txt = document.querySelector('input')
? ? ? ? const btn = document.querySelector('button')
?? ??? ?var active=document.querySelector('.active')
? ? ? ? btn.onclick = ()=>{
? ? ? ? ? ? axios.get('https://jx.xuzhixiang.top/ap/api/search.php', {
? ? ? ? ? ? ? ? params: {
? ? ? ? ? ? ? ? ? ? keywords: txt.value.trim()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? .then(res=>{
?? ??? ??? ??? ? active.innerHTML=''
? ? ? ? ? ? ? ? console.log(res.data)
? ? ? ? ? ? ? ? const { pois } = res.data
? ? ? ? ? ? ? ? console.log(pois)
?? ??? ??? ??? ?pois.forEach(item=>{
?? ??? ??? ??? ??? ?if(item.photos.length==0){
?? ??? ??? ??? ??? ??? ?console.log(123)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else{
?? ??? ??? ??? ? ? active.innerHTML += `
?? ??? ??? ??? ? ? <div class="card" style="width: 18rem;">
?? ??? ??? ??? ? ? ? ? <img src="${item.photos[0].url}" class="card-img-top" alt="...">
?? ??? ??? ??? ? ? ? ? <div class="card-body">
?? ??? ??? ??? ? ? ? ? <h5 class="card-title hide">${item.address}</h5>
?? ??? ??? ??? ? ? ? ? <p class="card-text">${item.adname}</p>
?? ??? ??? ??? ? ? ? ??
?? ??? ??? ??? ? ? ? ? </div>
?? ??? ??? ??? ? ? </div>
?? ??? ??? ??? ? ? `
?? ??? ??? ?
?? ??? ??? ??? ? ? }
?? ??? ??? ??? ??? ? })
? ? ? ? ? ? })
? ? ? ? }
? ? </script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135208991
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。