这个案例使用了art-template模板引擎,事先需准备好template-web.js
文件
效果图
数据较多,这里只显示部分数据效果
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全国天气预报</title>
<style type="text/css">
li {
list-style: none;
}
.wrap {
width: 25rem;
height: auto;
margin: 0 auto;
display: flex;
flex-direction: column;
background-color: skyblue;
}
.header {
margin-bottom: 0.625rem;
padding-bottom: 0.3125rem;
border-bottom: 1px solid #eee;
}
.headerText {
text-align: center;
font-size: 26px;
}
.inp-btn {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 0.625rem;
}
.get {
width: 15.625rem;
height: 1.5625rem;
border: 1px solid #fff;
border-radius: 20px;
box-shadow: none;
text-align: center;
background-color: #fff
}
#getCity {
width: 100%;
height: 100%;
border: none;
background: none;
padding-left: 15px;
outline: none;
}
.get-btn {
border: 1px solid #fff;
width: 3.125rem;
border-radius: 10px;
outline: none;
margin-left: 20px;
}
.lists {
background-color: #e0e0ec;
}
</style>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="template-web.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// 按回车键获取到文本框的值
getData()
$('#getCity').on('keydown', function(e) {
if (e.keyCode == 13) {
var param = $(this).val();
// console.log(param);
getData(param)
}
});
//点击查询按钮
$('#btn').on('click',function(){
var value = $('#getCity').val();
getData(value);
})
function getData(param) {
var param = param ? param : "北京";
$.ajax({
type: 'get',
url: 'http://api.tianapi.com/txapi/tianqi/index',
data: {
key: "",//第三方平台数据的apikey
city: param
},
// dataType:'jsonp',
success: function(res) {
console.log(res.newslist);
var html = template('temp', res);
$('#ulLists').html(html);
}
})
}
})
</script>
</head>
<body>
<div class="wrap">
<div class="header">
<p class="headerText">全国城市天气查询</p>
</div>
<div class="inp-btn">
<div class="get">
<input type="text" placeholder="请输入城市名称" id="getCity">
</div>
<button type="button" id="btn" class="get-btn">查询</button>
</div>
<div class="lists">
<ul id="ulLists">
<script type="text/html" id="temp">
<li>
<h3>城市: {{newslist[0].area}}</h3>
</li>
{{each newslist}}
<li>
<h3>日期: {{$value.date}}</h3>
</li>
<li>
<h3>星期: {{$value.week}}</h3>
</li>
<li>
<h3>早晚天气变化: {{$value.weather}}</h3>
</li>
<li>
<h3>实时天气: {{$value.real}}</h3>
</li>
<li>
<h3>最低温: {{$value.lowest}}</h3>
</li>
<li>
<h3>最高温: {{$value.highest}}</h3>
</li>
<li>
<h3>风向: {{$value.wind}}</h3>
</li>
<li>
<h3>风速: {{$value.windspeed}}</h3>
</li>
<li>
<h3>风力: {{$value.windsc}}</h3>
</li>
<li>
<h3>日出时间: {{$value.sunrise}}</h3>
</li>
<li>
<h3>日落时间: {{$value.sunset}}</h3>
</li>
<li>
<h3>月升时间: {{$value.moonrise}}</h3>
</li>
<li>
<h3>月落时间: {{$value.moondown}}</h3>
</li>
<li>
<h3>降雨量: {{$value.pcpn}}</h3>
</li>
<li>
<h3>降雨概率: {{$value.pop}}</h3>
</li>
<li>
<h3>紫外线强度指数: {{$value.uv_index}}</h3>
</li>
<li>
<h3>能见度,单位:公里: {{$value.vis}}</h3>
</li>
<li>
<h3>相对湿度: {{$value.humidity}}</h3>
</li>
<li>
<h3>生活指数提示: {{$value.tips}}</h3>
</li>
{{/each}}
</script>
</ul>
</div>
</div>
</body>
</html>
这里需要注意的是,调用第三方平台数据是 跨域 请求,一般情况下,进行跨域请求需要在$.ajax()方法中声明 dataType:'jsonp'
,否则无法向服务端请求数据。但如果服务端允许跨域请求 header('Access-Control-Allow-Origin: *');
也就是跨域资源共享CORS,则不需要在客户端 $.ajax()方法中声明 dataType:'jsonp