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>

相关推荐
前端Hardy6 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy6 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子7 小时前
迭代器和生成器
前端·javascript
源猿人10 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin11 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖12 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬13 小时前
Promise 的场景和最佳实践
前端·javascript
Asort13 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio13 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly13 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试