Ajax跨域-360天氣查詢

ACodingIceBear發表於2018-01-08
原文網址 : https://juejin.im/post/5a522584518825732f7e8ee9
跨域

在360天氣查詢時，可以獲取到響應中的跨域資料介面檔案，其中包含的是獲取的城市的天氣情況，可以利用城市Id值得不同，利用360天氣的地址，動態獲取不同城市的天氣情況。

例如：通過360的跨域介面獲取到的廣州的天氣情況

Ajax跨域-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>
複製程式碼

效果圖

Ajax跨域-360天氣查詢

小結：利用了jQuery的一個跨域方法實現簡單的跨域請求，實時查詢城市天氣。關鍵的是利用不同城市的ID跨域請求到相應的城市天氣資料，然後從獲取到的資料中，提取出要展示的資訊，新增到DOM樹上。

相關文章