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>

相关推荐
Dream耀几秒前
Cookie:Web身份认证的基石
前端·javascript·http
Qinana3 分钟前
今日前端学习总结
javascript
Whoisshutiao5 分钟前
Python网安-zip文件暴力破解(仅供学习)
开发语言·python·网络安全
学吧那就5 分钟前
JavaScript进阶之路(一)
javascript
十盒半价9 分钟前
闭包:JS 里的 “背包客”,背走了变量的秘密
前端·javascript·trae
FairyDiana11 分钟前
【JavaScript】一篇文章,带你拿捏JS中的类型判断
javascript·面试
ComputerInBook37 分钟前
C++ 标准模板库算法之 transform 用法
开发语言·c++·算法·transform算法
江城开朗的豌豆39 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
杰哥技术分享1 小时前
PHP Yii2 安装SQL Server扩展-MAC M4 Pro芯片
开发语言·php
Jinxiansen02111 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js