利用气象局的接口写一个自己的天气预报

忽然写自己的一个天气预报，首先不知如何下手，首先想到的是不是讲script链接引入到文件头部就可以了，然而接下来又要怎么做？
在经过了半天的网上搜索后，明白了要写的流程，
①。找到合适得接口。

在网上搜索说中国气象局提供了三个接口
国家气象局提供的天气预报接口

接口地址：

http://www.weather.com.cn/data/sk/101010100.html

http://www.weather.com.cn/data/cityinfo/101010100.html

http://m.weather.com.cn/data/101010100.html

101010100为城市代码，是固定的，这里表示北京。然而并没有什么用，前两个可以访问，但是返回的数据太少了，最后一个说是最新的接口，数据比较多，但是我访问的却是403.

最后在网上又找了一个接口
http://wthrcdn.etouch.cn/weather_mini?citykey=101071201;
同样后面的数字为地区编号。

②。使用ajax异步请求来获取数据。
在这里我使用了jquery的ajax来请求数据。success的function中的参数为请求到的数据，只需要进行第三步解析即可。

var url = "http://wthrcdn.etouch.cn/weather_mini?citykey=101071201";        $.ajax({          url: url,          dataType: "jsonp",          // scriptCharset: "gbk",          method:'GET',          crossDomain: true,         success: function (data) {     //请求无误，但是数据有误，desc为接口返回的数据中的一部分，往下看              if(desc != "ok"){            alert("请求地区有误");        }        //        //这儿写上正常处理的流程        var description = "";            for(var i in data.data){                var property=data.data[i];                description+=i+" = "+property+"\n";            }            alert(description);         }         error:function(){        console.log("请求失败");    }

③ 对接口返回的数据进行处理
返回的数据格式

{
“desc”: “OK”,
“status”: 1000,
“data”: {
“wendu”: “22”,
“ganmao”: “各项气象条件适宜，无明显降温过程，发生感冒机率较低。”,
“forecast”:
[{
“fengxiang”: “南风”,
“fengli”: “3-4级”,
“high”: “高温 26℃”,
“type”: “多云”,
“low”: “低温 13℃”,
“date”: “28日星期四”
},
{
“fengxiang”: “无持续风向”,
“fengli”: “微风级”,
“high”: “高温 28℃”,
“type”: “多云”,
“low”: “低温 15℃”,
“date”: “29日星期五”
},
{
“fengxiang”: “无持续风向”,
“fengli”: “微风级”,
“high”: “高温 31℃”,
“type”: “晴”,
“low”: “低温 15℃”,
“date”: “30日星期六”
},
{
“fengxiang”: “无持续风向”,
“fengli”: “微风级”,
“high”: “高温 29℃”,
“type”: “多云”,
“low”: “低温 20℃”,
“date”: “1日星期天”
},
{
“fengxiang”: “北风”,
“fengli”: “4-5级”,
“high”: “高温 26℃”,
“type”: “小到中雨”,
“low”: “低温 13℃”,
“date”: “2日星期一”
}],
“yesterday”: {
“fl”: “微风”,
“fx”: “无持续风向”,
“high”: “高温 19℃”,
“type”: “小雨”,
“low”: “低温 12℃”,
“date”: “27日星期三”
},
“aqi”: “118”,
“city”: “朝阳县”
}
}

这是一个json格式的返回串，在js中只要将你所需要的数据解析出来就好了，
JavaScript代码：

 var url = "http://wthrcdn.etouch.cn/weather_mini?citykey=101071201";        $.ajax({          url: url,          dataType: "jsonp",          // scriptCharset: "gbk",          method:'GET',          crossDomain: true,          success: function (data) {              if(desc != "ok"){            alert("请求地区有误");        }        //        //这儿写上正常处理的流程         }         error:function(){        console.log("请求失败");    }

经过以上三步，一个请求天气预报接口的流程是出来了，页面布局及其里面的数据处理还需要花费更多的时间。

注：尽量使用火狐浏览器，因为后续ajax的异步加载中需要web容器，火狐浏览器自带web容器。所以不需要你去再打开本地的服务器。

或许我们发现以上的数据并不满足我们的需要，所以下一节给大家推荐一个数据更详细的接口。