【城市天气】使用Ajax发送和接受数据
任务：利用中国天气网的公开接口，实现天气预报的查询功能
实验的功能要求如下：
（1）当网页加载时，根据所给的 json 数据解析获得省（直辖市）的信息并显示在下拉列表框中供用户选择；
（2）当用户选择某个省（直辖市），在第二个下拉列表框中显示所有的城市（地区）信息；
（3）当用户选择了某个城市（地区），查询最近 15 天的天气预报信息并在表格中显示。
主要代码：
<!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>
