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

<!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>

相关推荐
艾莉丝努力练剑1 小时前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
倔强青铜35 小时前
苦练Python第18天:Python异常处理锦囊
开发语言·python
u_topian5 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
珊瑚里的鱼6 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法
AI+程序员在路上6 小时前
QTextCodec的功能及其在Qt5及Qt6中的演变
开发语言·c++·qt
xingshanchang6 小时前
Matlab的命令行窗口内容的记录-利用diary记录日志/保存命令窗口输出
开发语言·matlab
Risehuxyc6 小时前
C++卸载了会影响电脑正常使用吗?解析C++运行库的作用与卸载后果
开发语言·c++
AI视觉网奇6 小时前
git 访问 github
运维·开发语言·docker
不知道叫什么呀6 小时前
【C】vector和array的区别
java·c语言·开发语言·aigc