Ajax跨域-360天气查询

跨域获取天气

最新推荐文章于 2024-06-10 12:21:06 发布

转载最新推荐文章于 2024-06-10 12:21:06 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a522584518825732f7e8ee9

文章标签：

#php #javascript #ViewUI

本文介绍了一个使用jQuery实现的跨域请求示例，通过更改城市ID动态获取不同城市的天气信息，并将其展示在网页上。

在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>
复制代码