jQuery天气信息展示
0 Views 前端 with
本文字数:1,003 字 | 阅读时长 ≈ 5 min

jQuery天气信息展示

0 Views 前端 with
本文字数:1,003 字 | 阅读时长 ≈ 5 min

本节主要讲述jQuery天气信息展示

1、获取天气数据

1.1、数据来源

采用的是聚合数据提供的全国天气预报的api

请求示例:http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY

返回的数据采用JSON形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
{
"resultcode": "200",
"reason": "查询成功!",
"result": {
"sk": { /*当前实况天气*/
"temp": "21", /*当前温度*/
"wind_direction": "西风", /*当前风向*/
"wind_strength": "2级", /*当前风力*/
"humidity": "4%", /*当前湿度*/
"time": "14:25" /*更新时间*/
},
"today": {
"city": "天津",
"date_y": "2014年03月21日",
"week": "星期五",
"temperature": "8℃~20℃", /*今日温度*/
"weather": "晴转霾", /*今日天气*/
"weather_id": { /*天气唯一标识*/
"fa": "00", /*天气标识00:晴*/
"fb": "53" /*天气标识53:霾 如果fa不等于fb,说明是组合天气*/
},
"wind": "西南风微风",
"dressing_index": "较冷", /*穿衣指数*/
"dressing_advice": "建议着大衣、呢外套加毛衣、卫衣等服装。", /*穿衣建议*/
"uv_index": "中等", /*紫外线强度*/
"comfort_index": "",/*舒适度指数*/
"wash_index": "较适宜", /*洗车指数*/
"travel_index": "适宜", /*旅游指数*/
"exercise_index": "较适宜", /*晨练指数*/
"drying_index": ""/*干燥指数*/
},
"future": [ /*未来几天天气*/
{
"temperature": "28℃~36℃",
"weather": "晴转多云",
"weather_id": {
"fa": "00",
"fb": "01"
},
"wind": "南风3-4级",
"week": "星期一",
"date": "20140804"
},
{
"temperature": "28℃~36℃",
"weather": "晴转多云",
"weather_id": {
"fa": "00",
"fb": "01"
},
"wind": "东南风3-4级",
"week": "星期二",
"date": "20140805"
},
{
"temperature": "27℃~35℃",
"weather": "晴转多云",
"weather_id": {
"fa": "00",
"fb": "01"
},
"wind": "东南风3-4级",
"week": "星期三",
"date": "20140806"
},
{
"temperature": "27℃~34℃",
"weather": "多云",
"weather_id": {
"fa": "01",
"fb": "01"
},
"wind": "东南风3-4级",
"week": "星期四",
"date": "20140807"
},
{
"temperature": "27℃~33℃",
"weather": "多云",
"weather_id": {
"fa": "01",
"fb": "01"
},
"wind": "东北风4-5级",
"week": "星期五",
"date": "20140808"
},
{
"temperature": "26℃~33℃",
"weather": "多云",
"weather_id": {
"fa": "01",
"fb": "01"
},
"wind": "北风4-5级",
"week": "星期六",
"date": "20140809"
},
{
"temperature": "26℃~33℃",
"weather": "多云",
"weather_id": {
"fa": "01",
"fb": "01"
},
"wind": "北风4-5级",
"week": "星期日",
"date": "20140810"
}
]
},
"error_code": 0
}

1.2、调用方法

采用jQuery的jsonp方法,跨源调用

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
url: "http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=65e72d389332a42d4f6288f772b13265",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function(data) {
console.log("success");
console.log(data);

},
error: function() {
console.log("error");
}
})

返回数据如图所示:

1.3、HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" id="cs">
<button id="btn">查询</button>
<div class="box">
<p>请求:<span id="reason"></span></p>
<p>城市:<span id="city"></span></p>
<p>日期:<span id="date_y"></span></p>
<p>今日温度:<span id="temperature"></span></p>
<p>今日天气:<span id="weather"></span></p>
<p>风向:<span id="wind"></span></p>
<p>穿衣指数:<span id="dressing_index"></span></p>
<p>紫外线强度:<span id="uv_index"></span></p>
</div>

1.4、CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
width: 300px;
height: 500px;
}

.box p {
color: darkred;
font-size: 20px;
font-weight: 800;
}

.box p span {
color: darkcyan;
font-size: 15px;
}

1.5、JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {



$("#btn").on("click", function () {

console.log(encodeURI($("#cs").val()));

$("#reason").html("");
$("#city").html("");
$("#date_y").html("");
$("#temperature").html("");
$("#weather").html("");
$("#wind").html("");
$("#dressing_index").html("");
$("#uv_index").html("");

var city = (encodeURI($("#cs").val()));
$.ajax({
url:"http://v.juhe.cn/weather/index?format=2&cityname="+city+"&key=65e72d389332a42d4f6288f772b13265",
type:"GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
console.log("success");
console.log(data);
$("#reason").html(data.reason);
$("#city").html(data.result.today.city);
$("#date_y").html(data.result.today.date_y);
$("#temperature").html(data.result.today.temperature);
$("#weather").html(data.result.today.weather);
$("#wind").html(data.result.today.wind);
$("#dressing_index").html(data.result.today.dressing_index);
$("#uv_index").html(data.result.today.uv_index);

},
error:function(){
console.log("error");
}
})

})

})
</script>

1.6、总结

JSON数据的使用,是重点,可以多加实践

Apr 06, 2018