WEB前端工程師(實踐)製作天氣預報難度:簡單

需要準備:jQuery Bootstrap 天氣預報API(本文中使用API可能會失效請靈活運用)

CSS樣式可以你自己去寫這裡只提出jQuery 請求數據和解析JSON數據 

{
	"resultcode":"200",
	"reason":"successed!",
	"result":{
		"sk":{
			"temp":"21",
			"wind_direction":"東北風",
			"wind_strength":"3級",
			"humidity":"66%",
			"time":"14:00"
		},
		"today":{
			"temperature":"17℃~22℃",
			"weather":"陰",
			"weather_id":{
				"fa":"02",
				"fb":"02"
			},
			"wind":"東北風3-4 級",
			"week":"星期三",
			"city":"無錫",
			"date_y":"2016年10月12日",
			"dressing_index":"較舒適",
			"dressing_advice":"建議著薄外套、開衫牛仔衫褲等服裝。年老體弱者應適當添加衣物，宜著夾克衫、薄毛衣等。",
			"uv_index":"最弱",
			"comfort_index":"",
			"wash_index":"較適宜",
			"travel_index":"較適宜",
			"exercise_index":"較適宜",
			"drying_index":""
		},
		"future":{
			"day_20161012":{
				"temperature":"17℃~22℃",
				"weather":"陰",
				"weather_id":{
					"fa":"02",
					"fb":"02"
				},
				"wind":"東北風3-4 級",
				"week":"星期三",
				"date":"20161012"
			},
			"day_20161013":{
				"temperature":"17℃~21℃",
				"weather":"陰",
				"weather_id":{
					"fa":"02",
					"fb":"02"
				},
				"wind":"東北風3-4 級",
				"week":"星期四",
				"date":"20161013"
			},
			"day_20161014":{
				"temperature":"18℃~22℃",
				"weather":"陣雨",
				"weather_id":{
					"fa":"03",
					"fb":"03"
				},
				"wind":"東北風3-4 級",
				"week":"星期五",
				"date":"20161014"
			},
			"day_20161015":{
				"temperature":"17℃~22℃",
				"weather":"陣雨",
				"weather_id":{
					"fa":"03",
					"fb":"03"
				},
				"wind":"東北風3-4 級",
				"week":"星期六",
				"date":"20161015"
			},
			"day_20161016":{
				"temperature":"17℃~24℃",
				"weather":"陰",
				"weather_id":{
					"fa":"02",
					"fb":"02"
				},
				"wind":"東北風3-4 級",
				"week":"星期日",
				"date":"20161016"
			},
			"day_20161017":{
				"temperature":"17℃~21℃",
				"weather":"陰",
				"weather_id":{
					"fa":"02",
					"fb":"02"
				},
				"wind":"東北風3-4 級",
				"week":"星期一",
				"date":"20161017"
			},
			"day_20161018":{
				"temperature":"17℃~21℃",
				"weather":"陰",
				"weather_id":{
					"fa":"02",
					"fb":"02"
				},
				"wind":"東北風3-4 級",
				"week":"星期二",
				"date":"20161018"
			}
		}
	},
	"error_code":0
}

上面是要用到的JSON數據格式

搭建界面略過 根據JSON中數據添加到HTML中

解析數據到HTML中 其中一定要註意 跨域問題

$(document).ready(function() {
$.ajax({
type : "POST",
dataType:'JSONP',//跨域
jsonp:"callback",
jsonpCallback:"fanyi",
url:"http://v.juhe.cn/weather/ip",//伺服器URL
data : {ip:"124.126.230.180",key:"b2a208cb39cec1c93dd5534966708285"},//請求數據
success : function(datas){//datas是返回的JSON數據

if (datas.resultcode == 200) {//根據返回的數據 判斷是否成功獲取到JSON中的值
$("#city").text(datas.result.today.city);//解析數據到HTML文檔中顯示數據
$("#date").text(datas.result.sk.time+"發佈");
$("#temp").text(datas.result.sk.temp+"°");
$("#weather").text(datas.result.today.weather);
$("#jt-tq").text(datas.result.today.weather);
$("#jt-wd").text(datas.result.today.temperature);
$("#jt-fx").text(datas.result.today.wind);
$("#two-week").text(datas.result.future.day_20161013.week);
$("#two-tq").text(datas.result.future.day_20161013.weather);
$("#two-wd").text(datas.result.future.day_20161013.temperature);
$("#two-fx").text(datas.result.future.day_20161013.wind);
$("#three-week").text(datas.result.future.day_20161014.week);
$("#three-tq").text(datas.result.future.day_20161014.weather);
$("#three-wd").text(datas.result.future.day_20161014.temperature);
$("#three-fx").text(datas.result.future.day_20161014.wind);

}else{

//錯誤...

}

}
});
});