freeCodeCamp-show the loacl weather

最近在freeCodeCamp上刷题，刷到了这样一个小页面。具体地址是：show the local weacher.
要求是通过JS获取JSON数据，将天气情况展示在页面上。自己根据它的要求做了 一个简答的界面，主要实现了：
- 通过ip获取到当前地址，然后根据地址获取到当前天气状况，包括天气现状、温度以及当前天气描述；
- 也获得了包含当日晚上在内的未来三天的天气的简略信息，包含日期、天气情况以及最高温与最低温。

主要讲一个用jQuery来实现抓取天气JSON数据的实现

1. 首先是获取到当前用户ip；
   在这个过程中使用的是 jQuery中的$.getJSON(url,[data],[callback]) 方法来实现。它接受三个参数，第一个是url :发送请求地址；第二个：data 待发送 key/value 数据；第三个：callback 载入成功时回调函数。
   知道参数的意义，就进行设置。利用 http://weixin.jirengu.com/weather/ip 此接口来获取ip。具体实例：

    var userip;
    $.getJSON("http://weixin.jirengu.com/weather/ip", function(useIp) {
        userip = useIp.data;    
        console.log(userip);
        }); 

通过此可以在页面输出台中看到本地ip；
2. 提供天气数据的API。这里使用的是和风天气。
继续在获取ip成功后，获取天气数据，根据和风天气的官方文档，获取接口地址：免费用户接口，当然你也可以购买使用付费接口。
然后，根据需求选择合适的接口，如下图：

这里选择全部天气，并将city 属性值用第一步获取到的ip变量来替换。所以本次的获取天气数据使用的参数url 应该为url = 'https://free-api.heweather.com/v5/weather?city=' + userip + '&key=yourkey';
走到这一步，下面的就是简单的获取数据。例如获取本地城市的当前温度使用的是 JSON['HeWeather5'][0]["now"]["tmp"];，继而在输出到相应的标签中，可以使用.text()来实现。具体实例为：

    var url = 'https://free-api.heweather.com/v5/weather?city=' + userip + '&key=yourkey';
    $.getJSON(url, function(weathers) {
        nowDegree = weathers['HeWeather5'][0]["now"]["tmp"];  
        //当前温度  
        $('.now-degree').text(nowDegree);  
    });

最后，将第一步中获取IP与第二步中获取天气结合起来，便可以实现此功能。
例如：

$(document).ready(function() {
    var nowDegree;
    var userip = '';
    var url = '';
        //获取用户ip
    $.getJSON("http://weixin.jirengu.com/weather/ip", function(useIp) {
        userip = useIp.data;
        url = 'https://free-api.heweather.com/v5/weather?city=' + userip + '&key=yourkey';
        //进行当前天气状况输出
        $.getJSON(url, function(weathers) {
            nowDegree = weathers['HeWeather5'][0]["now"]["tmp"];
            //当前温度（'.now-degree'为p标签类名）
            $('.now-degree').text(nowDegree);
            console.log(nowDegree);
        });
    });
})

获取其他信息同理。只需要在和风天气帮助文档中查找相关数据即可。
我自己做的本案例地址：Show the Local Weather.
欢迎大家提出宝贵意见。
联系方式：[email protected]