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数据格式

Bootstrap,搭建分界面略过 根据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:”12四.1二陆.230.180″,key:”b2a20八cb3九cec1c九3dd5534966708285″},//请求数据
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{

//错误…

}

}
});
});

 

 

 

相关文章