需要准备: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{
//错误...
}
}
});
});