1.所需文件
(1).jQuery.js
(2).json文件
(3)art-template.js
(4).极速数据API接口
2.。效果图
3.实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<style type="text/css">
.address{
width: 600px;
margin: 0 auto;
border: 1px solid green;
}
h3,h4,h5{
width: 600px;
margin: 0 auto;
}
</style>
<body>
<p>输入所在城市</p>
<input type="text">
<button type="">点击查询</button>
<div class="div">
</div>
<script id="test" type="text/html">
//遍历数据数组!!!!
{{each list v i}}
<h3>{{v.city}}</h3>
<h3>{{v.cityid}}</h3>
<h4><img src="{{v.logo}}" alt=""></h4>
<h4>影院名称:{{v.theatername}}</h4>
<h4>电话:{{v.tel}}</h4>
<div class="address">地址:{{v.address}}</div>
<h4>时间{{v.hours}}</h4>
<h3>大众评分{{v.score}}</h3>
<div class="address"><h5>影院介绍:{{v.summary}}</h5></div>
{{/each}}
</script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
var city = $('input').val();
$.ajax({
//输入自己的API
url: 'http://api.jisuapi.com/movie/theater?appkey=87e25a4dc0cc799d',
type: 'get',
dataType: 'jsonp',
data: { city:city},
success: function(msg) {
var data = msg.result;
var html = template('test',data);
//塞到div中
$('.div')[0].innerHTML+=html;
console.log(data);
console.log(data.cityid);
console.log(data.list[0].address);
}
})
});
})
</script>
</body>
</html>