【城市天氣】使用Ajax發送和接受數據

時間 2019-11-13

標籤城市天氣使用 ajax 發送接受數據欄目 Ajax 简体版

原文原文鏈接

任務：利用中國天氣網的公開接口，實現天氣預報的查詢功能javascript

實驗的功能要求以下：css

（1）當網頁加載時，根據所給的 json 數據解析得到省（直轄市）的信息並顯示在下拉列表框中供用戶選擇；html

（2）當用戶選擇某個省（直轄市），在第二個下拉列表框中顯示全部的城市（地區）信息；java

（3）當用戶選擇了某個城市（地區），查詢最近 15 天的天氣預報信息並在表格中顯示。jquery

主要代碼：json

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天氣查詢</title>
<script type="text/javascript" src="citydata.js"></script> //數據比較大，沒法上傳
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript">
    function getPro()
    {
        $("#pro").html("");
        
        for(i=0;i<cityData.length;i++)
        {
            if(cityData[i].pid==0)
            {
                $("#pro").append('<option value="'+cityData[i].id+'">'+cityData[i].city_name+'</option>');
                
            }
        }
        getCity($("#pro").val());
    }
    function getCity(pid)
    {
        $("#ThisPro").html($("#pro option:selected").text());
        $("#ThisCity").html("");
        $("#city").html("");
        var flag=false;
        for(i=0;i<cityData.length;i++)
        {
            if(cityData[i].pid==pid)
            {
                flag=true;
                $("#city").append('<option value="'+cityData[i].city_code+'">'+cityData[i].city_name+'</option>');
            }
        }
        if(!flag)
        {
            for(i=0;i<cityData.length;i++)
            {
                if(cityData[i].id==pid)
                {
                    $("#city").append('<option value="'+cityData[i].city_code+'">'+$("#pro option:selected").text()+'</option>');
                    break;
                }    
            }    
        }
        queryWeatherInfo($("#city").val());
    }
    function queryWeatherInfo(city_code)
    {
        var url="http://www.class-space.cn/weather/query?cityCode="+city_code;
        $("#ThisCity").text($("#city option:selected").text());
        $.get(url,function(result,status,xhr)
                {
                    if(status=="success")
                    {
                        var forecast=result.data.forecast;
                        var msg="";
                        for(i=0;i<forecast.length;i++)
                            {
                                msg+="<tr align='center'>";
                                msg+="<td>"+forecast[i].ymd+"</td>";
                                msg+="<td>"+forecast[i].type+"</td>";
                                msg+="<td>"+forecast[i].low.slice(3,6)+"</td>";
                                msg+="<td>"+forecast[i].high.slice(3,6)+"</td>";
                                msg+="<td>"+forecast[i].fx+"</td>";
                                msg+="<td>"+forecast[i].fl+"</td>";
                                msg+="<td>"+forecast[i].sunrise+"</td>";
                                msg+="<td>"+forecast[i].notice+"</td>";
                                msg+="</tr>";
                            }
                        $("#WeatherLoadList").html(msg);
                    }
                });
    }
    
    
</script>
</head>
<body>
    
    <div id="contain">
        
        <p>請選擇須要查詢的城市或信息</p>
        <br>
        <div>
            省（直轄市）:
            <select id="pro"></select>
            城市（地區）:
            <select id="city"></select>
        </div>
        <hr>
        <div>
        <span class="lead" id="ThisPro" style="color:red;font-size:30px;"></span>
        <span id="ThisCity" ></span>
        </div>
        <br>
        <table class="table table-striped table-hover">
            <thead>
                <tr align="center">
                    <th scope="col">日期</th>
                    <th scope="col">天氣狀況</th>
                    <th scope="col">最低溫度</th>
                    <th scope="col">最高溫度</th>
                    <th scope="col">風向</th>
                    <th scope="col">風速</th>
                    <th scope="col">日出時間</th>
                    <th scope="col">提示</th>
                </tr>
            </thead>
            <tbody id="WeatherLoadList"></tbody>
        </table>
    
    </div>
    <script>
            $(document).ready(function(){
                    getPro();
                    $("#pro").change(function()
                    {
                        getCity(this.value);
                    });
                    
                    $("#city").change(function(){
                        queryWeatherInfo(this.value)
                    });
            });
    </script>
</body>
</html>