<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
#info{
background-color: skyblue;
position: relative;
left: 300px;
width: 800px;
}
#ff{
text-align: center;
}
img{
width: 400px;
height: 200px;
align-self: center;
}
</style>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<body>
<div>
</div>
<div id="data">
<div style="text-align: center;">
<select id="city" style="width: 200px; text-align: center;">
<option value="2">北京市</option>
<option value="39">上海市</option>
<option value="52">重庆市</option>
<option value="2635">成都市</option>
<option value="284852">苏州市</option>
</select>
<input type="button" value="获取天气信息" id="btn">
</div>
<div id="info">
<h1 style="text-align: center;">
实时天气信息
</h1>
</div>
</div>
<script type="text/javascript">
//var aa={"code":0,"data":{"city":{"cityId":2,"counname":"中国","ianatimezone":"Asia/Shanghai","name":"北京市","pname":"北京市","secondaryname":"北京市","timezone":"8"},"limit":[{"date":"2020-12-17","prompt":"27"},{"date":"2020-12-18","prompt":"38"},{"date":"2020-12-19","prompt":"W"},{"date":"2020-12-20","prompt":"W"},{"date":"2020-12-21","prompt":"49"},{"date":"2020-12-22","prompt":"50"},{"date":"2020-12-23","prompt":"16"},{"date":"2020-12-24","prompt":"27"},{"date":"2020-12-25","prompt":"38"},{"date":"2020-12-26","prompt":"W"},{"date":"2020-12-27","prompt":"W"},{"date":"2020-12-28","prompt":"49"},{"date":"2020-12-29","prompt":"50"},{"date":"2020-12-30","prompt":"16"},{"date":"2020-12-31","prompt":"27"},{"date":"2021-01-01","prompt":"38"}]},"msg":"success","rc":{"c":0,"p":"success"}}
$('#btn').click(function(){
var id = $("#city").val();
$.ajax({
type: "POST",
url: "http://freecityid.market.alicloudapi.com/whapi/json/alicityweather/briefforecast3days",
data: {cityId: id ,token : '677282c2f1b3d718152c4e25ed434bc4'},//data中存放的是参数会自动拼接到url后面
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization","APPCODE 自己的APPCODE");
},
dataType:"JSON",
success: function(res) {
var tag ='';
var day = res.data.forecast[0].updatetime;
var wea = res.data.forecast[0].conditionDay;
var city = res.data.city.name;
var tempa =res.data.forecast[0].tempDay;
var tempb =res.data.forecast[0].tempNight;
tag+=
'<div id ="ff"><img src = "sun.jpg"></div>'+
'<div>'+
'<span>当前城市:'+city+'</span>'+
'<ul>'+
'<li>天气:'+wea+'</li>'+
'<li>更新时间:'+day+'</li>'+
'<li>日间气温:'+tempa+'</li>'+
'<li>晚间气温:'+tempb+'</li>'+
'</ul>'+
'</div>';
$("#info").append(tag);
// alert(res.data.city.name)
//alert(JSON.stringify(data));
},
error : function(e) {
alert("网络异常,请重试");
}
});
})
//alert(JSON.stringify(aa))
</script>
</body>
</html>
ajax异步请求阿里云天气api
最新推荐文章于 2024-07-01 16:26:20 发布