Ajax跨域-360天气查询

在360天气查询时，可以获取到响应中的跨域数据接口文件，其中包含的是获取的城市的天气情况，可以利用城市Id值得不同，利用360天气的地址，动态获取不同城市的天气情况。

例如：通过360的跨域接口获取到的广州的天气情况

思路：通过城市的ID的改变，利用jQuery的$.ajax方法实现跨域请求。城市的ID是一个变量，在成功接收文件的回调函数中得数据，分别找出未来的天气情况，然后动态添加到DOM树上。

• HTML：简单列出几个城市,css样式省略

<div class="wrapper">
    <select>
        <option value="101300112">南宁</option>
        <option value="101280101">广州</option>
        <option value="101340101">台北</option>
        <option value="101210101">杭州</option>
        <option value="101231001">钓鱼岛</option>
        <option value="101210102">萧山</option>
    </select>
    <button>更改</button>

    <div id="box"></div>
</div>

• js部分

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
    //选择城市后，点击改变按钮调用获取天气的函数
    $("button").on("click",function(){
        $("#box").html("");
        getWeather($("option:selected").val());
        // console.log($("option:selected").val())
    });

    function getWeather(cityID){
        $.ajax({
            "url": "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=callback=?&code="+cityID,
            "dataType": "jsonp",
            "success": function(data){
                var weatherAll = data.weather;
                for(var i = 0; i<weatherAll.length; i++){
                    var date = weatherAll[i].date;
                    var day = weatherAll[i].info.day;
                    var night = weatherAll[i].info.night;
                    var str = "";
                    str += "<ul><h3>"+date+"</h3>";
                    str += "<li>白天的天气情况："+day[1]+"</li>";
                    str += "<li>白天的气温："+day[2]+"</li>";
                    str += "<li>白天的风向："+day[3]+"</li>";
                    str += "<li>白天的风速："+day[4]+"</li>";
                    str += "<li>夜间的天气情况："+night[1]+"</li>";
                    str += "<li>夜间的气温："+night[2]+"</li>";
                    str += "<li>夜间的风向："+night[3]+"</li>";
                    str += "<li>夜间的风速："+night[4]+"</li></ul>";
                    $(str).appendTo('#box');
                }
            }
        })
    };
    //页面加载立即执行点击事件
    $("button").triggerHandler("click");
</script>

效果图

小结：利用了jQuery的一个跨域方法实现简单的跨域请求，实时查询城市天气。关键的是利用不同城市的ID跨域请求到相应的城市天气数据，然后从获取到的数据中，提取出要展示的信息，添加到DOM树上。