JavaScript與jQuery

網頁前端開發與設計-第2版學校名稱：XXXX主講教師：XXXX第13章天氣預報查詢的設計與實現 本章學習目標學習掌握第三方服務平臺密鑰申請和調用方法；學習掌握JavaScript和jQuery基礎知識；學習掌握jQueryAJAX的用法實現服務器請求和回調處理。目錄13.1案例背景 13.2案例需求 13.3準備工作 13.4界面設計 13.5天氣預報查詢的實現 13.1案例背景13.1案例背景探索我國的氣象歷史文脈，就一定會提到北極閣。北極閣是南京城內的一座丘陵，又名欽天山，位于鼓樓東面，北依臺城、玄武湖，西連鼓樓崗，東連覆舟山，因劉宋時山上建立日觀臺而得名。古名“雞鳴山”，因形似雞籠又名“雞籠山”，明時“國朝于山巔置儀表，以測玄緯，名觀象臺，更名欽天山”。13.1案例背景北極閣氣象歷史源遠流長。早在南北朝時，北極閣即建有“靈臺候樓”，用以觀天測候；明，洪武年間，在此建“觀象臺”，又名“欽天臺”，既觀氣象又觀天象；清，康熙皇帝第六次下江南，曾登臺遠眺，親筆“曠觀”；民國時期，卓越的氣象、地理學家——竺可楨先生，在此創建中國歷史上第一個氣象研究所。13.1案例背景我國近、現代一批頂級氣象學家，如涂長望、趙九章、葉篤正、陶詩言等都曾在此工作、學習過。因此，南京北極閣被海內外氣象學界譽為中國近代氣象發祥地。新中國成立至今，北極閣一直是江蘇氣象臺所在地，是江蘇氣象業務服務中心。1999年，北極閣被國家科技部、教育部、中央宣傳部和中國科協命名為“全國青少年科技教育基地”。2000年，北極閣被南京大學選定為“產學科研基地”。北極閣既見證了民族歷史的滄桑一隅，也經歷了氣象創業的悠久歷程。13.2案例需求本章將綜合應用jQueryAJAX技術開發一個天氣預報查詢頁面，用戶通過切換城市名稱可以查詢該地區當天的天氣情況。為達到真實效果，本示例將選用一款具有氣象數據服務的免費開源API作為AJAX請求接口。13.2案例需求本章將綜合應用jQueryAJAX技術開發一個天氣預報查詢頁面，用戶通過切換城市名稱可以查詢該地區當天的天氣情況。為達到真實效果，本示例將選用一款具有氣象數據服務的免費開源API作為AJAX請求接口。13.2案例需求用戶可以使用下拉菜單切換城市，利用jQueryAJAX技術獲取當前城市的一系列氣象數據，最后將數據展現在界面上。本示例節選了四個直轄市（北京、重慶、上海和天津）的天氣數據，具體效果如圖所示。13.3準備工作13.3.1API密鑰申請 13.3.2API調用方法

13.3.1API密鑰申請本小節主要介紹如何申請獲得開源API的密鑰。由于百度APIStore目前已經不再提供服務，因此這里選擇了可以提供全球氣象數據服務接口的和風天氣API，其官方網址為/13.3.1API密鑰申請用戶使用郵箱進行注冊并激活后每次使用都可以免費獲取未來三天之內全球各地區的實時天氣，免費接口調用流量為1000次/天、頻率為200次/分鐘，該數據基本可以滿足讀者的開發學習需求。注冊完畢之后可以訪問/#/console來查看賬號信息，用戶登陸后即可看到開發者申請到的個人認證key，如果列表是空白的則可點擊“添加key”按鈕創建一個新的應用key。13.3.1API密鑰申請13.3.1API密鑰申請13.3.1API密鑰申請開發者需記錄上述頁面中的個人認證key，該信息在AJAX請求時會作為身份識別的標識一并發送給服務器。至此，開源API的密鑰申請就已經順利完成，讀者可以進行下一節的學習，了解如何調用API獲取氣象數據。13.3.2API調用方法免費用戶可以調用的接口地址為：/v7/，其服務器節點在中國境內。該接口地址后面追加不同的關鍵詞將獲取不同的氣象數據信息，例如alarm為天氣自然災害預警，讀者可以訪問官方文檔/docs/api/了解各類關鍵詞的使用方法。本示例將選用關鍵詞weather/now進行實況天氣數據的獲取。實況天氣即為當前時間點的天氣狀況以及溫濕風壓等氣象指數，具體包含的數據：體感溫度、實測溫度、天氣狀況、風力、風速、風向、相對濕度、大氣壓強、降水量、能見度等。目前該接口允許查詢的城市覆蓋范圍為全球任意一個城市。13.3.2API調用方法基于關鍵詞weather/now的接口具有2個必填參數和3個可選參數，如表所示。參數名稱參數類型解釋location必填參數用于規定需要查詢的地區。可以填入查詢地區的LocationID或經緯度坐標（十進制）。例如：location=101010100（查詢地區的LocationID）location=120.343,36.088（經緯度）key必填參數需要填入用戶的個人認證key字符串。接口將通過該數據判斷是否為授權用戶，并可以進一步判斷是否為付費用戶。例如：key=123abc456dfggzip可選參數對接口進行壓縮，可大幅節省網絡消耗、減少接口獲取延遲。參數的默認值是y，表示開啟gzip。參數值改成n表示不使用壓縮。lang可選參數用于指定數據的語言版本，不添加lang參數則默認為簡體中文。例如：lang=en需要注意的是，國內某些特定數據（例如生活指數、空氣質量等）不支持多語言版。unit可選參數單位選擇，公制（m）或英制（i），默認為公制單位。例如：unit=i詳見表13-2度量衡單位一覽表。13.3.2API調用方法其中與unit參數相關公制和英制單位對比如表所示。數據項公制單位英制單位溫度攝氏度℃華氏度℉風速公里/小時

km/h英里/小時

mile/h能見度公里

km英里

mile大氣壓強百帕

hPa百帕

hPa降水量毫米

mm毫米

mmPM2.5微克/立方米μg/m3微克/立方米μg/m3PM10微克/立方米μg/m3微克/立方米μg/m3O3微克/立方米μg/m3微克/立方米μg/m3SO2微克/立方米μg/m3微克/立方米μg/m3CO毫克/立方米

mg/m3毫克/立方米

mg/m3NO2微克/立方米μg/m3微克/立方米μg/m3注：部分數據項無論選擇何種單位均會使用公制單位。13.3.2API調用方法免費用戶調用接口的常見語法格式如下：其中[parameters]需要替換成使用到的參數，多個參數之間使用&符號隔開。例如，使用LocationID查詢上海市天氣數據的寫法如下：注：其中key的值1234abcd為隨機填寫的內容，請在實際開發中將其替換為真實的個人認證key，否則接口將無法獲取數據。/v7/weather/now?[parameters]/v7/weather/now?location=101020100&key=1234abcd13.3.2API調用方法可以直接將這段地址輸入到瀏覽器地址欄中測試數據返回結果，如圖所示。由上圖可見，指定城市的天氣數據返回結果是json數據格式的文本內容，其中包含的數據是以“名稱:值”的形式存放。本示例將節選實況天氣now中的部分內容進行處理和使用。13.3.2API調用方法為方便用戶查看，將返回的數據內容整理格式后節選如下：{"code":"200","updateTime":"2021-01-12T20:36+08:00","fxLink":"http://hfx.link/2bc1","now":{"obsTime":"2021-01-12T20:04+08:00","temp":"5","feelsLike":"3","icon":"150","text":"晴","wind360":"270","windDir":"西風","windScale":"0","windSpeed":"0","humidity":"33","precip":"0.0","pressure":"1017","vis":"15","cloud":"0","dew":"-9"},"refer":{"sources":["WeatherChina"],"license":["nocommercialuse"]}}13.3.2API調用方法返回的字段說明如表所示。參數描述示例值code接口請求狀態碼，例如200表示請求成功。200updateTime當前API的最新更新時間2021-01-12T20:36+08:00fxLink該城市的天氣預報和實況自適應網頁，可嵌入網站或應用http://hfx.link/2bc1now實況天氣參數描述示例值obsTime實況觀測時間2021-01-12T20:04+08:00temp溫度，默認單位：攝氏度5feelsLike體感溫度，默認單位：攝氏度3icon實況天氣狀況的圖標代碼。150text實況天氣狀況的文字描述晴wind360風向360角度270windDir風向西風windScale風力0windSpeed風速，公里/小時0humidity相對濕度33precip降水量0.0pressure大氣壓強1017vis能見度，默認單位：公里15cloud云量0dew實況露點溫度-9refer數據來源參數描述示例值sources原始數據來源，該值有可能為空值WeatherChinalicense數據許可證（例如是免費版、商業版）nocommercialuse13.3.2API調用方法其中參數code的狀態碼及錯誤碼如表所示。代碼說明200請求成功204請求成功，但所查詢的地區暫時沒有你需要的數據。400請求錯誤，可能包含錯誤的請求參數或缺少必選的請求參數。401認證失敗，可能使用了錯誤的KEY、數字簽名錯誤、KEY的類型錯誤。402超過訪問次數或余額不足以支持繼續訪問服務，你可以充值、升級訪問量或等待訪問量重置。403無訪問權限，可能是綁定的PackageName、BundleID、域名IP地址不一致，或者是需要額外付費的數據。404查詢的數據或地區不存在。429超過限定的QPM（每分鐘訪問次數）500無響應或超時。13.3.2API調用方法用戶可以根據指定的名稱找到對應的數據值，例如在實況天氣數據now可以查到當前城市的溫度，對應的字段節選如下：上述代碼表示當前城市的溫度為5攝氏度，用戶也可以自行選用其他數據（例如空氣質量指數air/now等）完成開發練習。下一節將介紹天氣查詢界面的設計方案。"temp":"5"13.4界面設計13.4.1整體布局設計 13.4.2城市切換版塊設計 13.4.3天氣描述版塊設計 13.4.4實況氣象數據版塊設計13.4.1整體布局設計本項目的主要內容分為三個板塊：切換城市、天氣狀況、實況氣象數據。其界面結構設計效果如圖所示。

13.4.1整體布局設計上圖中的三個板塊內容具體解釋如下：切換城市：使用<div>元素完成，主要包含下拉菜單元素，用戶可以自行切換城市。圖標與天氣狀況：使用<div>元素完成，主要包含當前城市的天氣圖標、氣溫以及天氣狀況描述（例如晴、多云、雷陣雨等）實況氣候數據：使用<table>元素完成，主要包含體感溫度、相對濕度、降水量、氣壓、能見度和風力共計6種實時氣象數據，在<table>中形成四行三列表格內容。13.4.1整體布局設計在HTML5中使用<div>元素將這三個版塊嵌套在內部，相關代碼如下：1. <body>2. <!--標題-->3. <h3>jQueryAJAX天氣預報查詢的設計與實現</h3>4. <!--水平線-->5. <hr>6. <!--天氣查詢版塊-->7. <divid="content">8. <!--1切換城市-->9. <divid="location">10. 切換城市（下拉菜單）11. </div>12. 13. <!--2天氣描述區域-->14. <divid="weather">15. 圖標氣溫天氣狀況16. </div>17. 18. <!--3實況數據-->19. <tableid="now">20. <!--3-1第一行（數據）-->21. <trid="line01">22. <td>1-1</td>23. <td>1-2</td>24. <td>1-3</td>25. </tr>26. <!--3-2第二行（單位名稱）-->27. <trid="line02">28. <td>2-1</td><td>2-2</td><td>2-3</td>29. </tr>30. <!--3-3第三行（數據）-->31. <trid="line03">32. <td>3-1</td>33. <td>3-2</td>34. <td>3-3</td>35. </tr>36. <!--3-4第四行（單位名稱）-->37. <trid="line04">38. <td>4-1</td><td>4-2</td><td>4-3</td>39. </tr>40. </table>41. </div>42. </body>13.4.1整體布局設計本示例使用CSS外部樣式表規定頁面樣式。在本地css文件夾中創建weather.css文件，并在<head>首尾標簽中聲明對CSS文件的引用。相關HTML5代碼片段如下：在CSS外部樣式表中首先為頁面設置整體樣式，相關CSS代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQueryAJAX天氣預報查詢的設計與實現</title>4. <linkrel="stylesheet"href="css/weather.css">5. </head>1. /*公共樣式*/2. body{3. text-align:center;/*文本居中*/4. background:silver;/*背景顏色灰色*/5. }13.4.1整體布局設計接下來在CSS外部樣式表中為<div>元素設置統一樣式，相關CSS代碼片段如下：然后繼續為id="content"的<div>元素設置樣式，相關CSS代碼片段如下：其中box-shadow屬性可以實現邊框投影效果，4個參數分別代表水平方向的偏移（向右偏移15像素）、垂直方向的偏移（向下偏移15像素）、陰影寬度（10像素）和陰影顏色（黑色），均可自定義成其他值。該屬性屬于CSS3新特性中的一種，在這里僅為美化頁面作簡單使用。1. div{2. padding:10px20px;/*內邊距上下10px左右20px*/3. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/4. }1. /*天氣查詢內容區域*/2. #content{3. margin:0pxauto;/*外邊距上下0左右auto*/4. max-width:480px;/*最大寬度480px*/5. background:white;/*背景顏色白色*/6. box-shadow:15px15px10pxblack;/*右下方10px寬的黑色陰影*/7. }13.4.1整體布局設計繼續為id="weather"的<div>元素以及內部氣象圖標設置樣式，相關CSS代碼片段如下：1. /*天氣描述區域*/2. #weather{3. font-size:2em;/*2個瀏覽器默認字符寬*/4. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/5. }6. /*天氣描述區域-氣象圖標*/7. #weatherimg{8. vertical-align:middle;/*垂直方向居中*/9. }13.4.1整體布局設計在CSS外部樣式表中為<table>及其內部子元素設置樣式效果，相關CSS代碼如下：1. /*表格*/2. table{3. margin:15pxauto;/*外邊距上下15px左右auto*/4. }5. /*表格-單元格*/6. td{7. padding:5px20px;/*內邊距上下5px左右20px*/8. border:1pxsolidred;/*1px紅色實線邊框（僅為設計時使用，最終將去掉）*/9. }10. /*表格-第1、3行*/11. #line01,#line03{12. font-size:1.3em;/*1.3個瀏覽器默認字符寬*/13. }14. /*表格-第2、4行*/15. #line02,#line04{16. color:gray;/*文字顏色灰色*/17. }13.4.2城市切換版塊設計該版塊是id="location"的<div>元素內部內容，包含一個下拉菜單<select>元素。其中第一個<option>使用了關鍵詞selected使其處于默認被選中狀態。開發者后續也可以根據實際需要追加更多的城市選項。1. <!--1切換城市-->2. <divid="location">3. 切換城市:4. <selectid="city">5. <optionvalue="101010100"selected>北京市</option>6. <optionvalue="101040100">重慶市</option>7. <optionvalue="101020100">上海市</option>8. <optionvalue="101030100">天津市</option>9. </select>10. </div>13.4.3天氣描述版塊設計該版塊是id="weather"的<div>元素內部內容，從左往右依次包含圖標、氣溫數據以及氣候描述。相關HTML5代碼片段如下：其中三個元素分別解釋如下：

<imgid="icon">元素：用于顯示氣候描述對應的天氣圖標。圖標素材可以自行準備，也可以從和風天氣官網下載（/docs/start/icons/）；

<spanid="temp">元素：用于顯示當前城市的氣溫（單位：攝氏度℃）；

<spanid="text">元素：用于顯示當前城市的氣候描述，例如多云、晴等。1. <!--2天氣描述區域-->2. <divid="weather">3. <!--2-1氣象圖標-->4. <imgid="icon"src="image/icons/999.png"/>5. <!--2-2溫度-->6. <spanid="temp">0</span>℃7. <!--2-3文字描述-->8. <spanid="text">Unknown</span>9. </div>當前由于尚未使用jQueryAJAX技術獲取數據，因此當前顯示的僅為樣式效果。13.4.4實況氣象數據版塊設計該版塊是id="now"的<table>元素內部內容，主要包含體感溫度、相對濕度、降水量、氣壓、能見度和風力共計6種實時氣象數據。相關HTML5代碼片段如下：1. <!--3實況數據-->2. <tableid="now">3. <!--3-1第一行（數據）-->4. <trid="line01">5. <td><spanid="feelsLike">0</span>℃</td>6. <td><spanid="humidity">0</span>%</td>7. <td><spanid="precip">0</span>mm</td>8. </tr>9. <!--3-2第二行（單位名稱）-->10. <trid="line02">11. <td>體感溫度</td>12. <td>相對濕度</td>13. <td>降水量</td>14. </tr>15. <!--3-3第三行（數據）-->16. <trid="line03">17. <td><spanid="pressure">0</span>hPa</td>18. <td><spanid="vis">0</span>km</td>19. <td><spanid="windScale">0</span><spanid="windDir">0</span></td>20. </tr>21. <!--3-4第四行（單位名稱）-->22. <trid="line04">23. <td>氣壓</td>24. <td>能見度</td>25. <td>風力</td>26. </tr>27. </table>13.4.4實況氣象數據版塊設計表格共計四行三列，其中第1、3兩行為實況氣象數據，第2、4兩行為上一行數據對應的文字描述。最后整理一下CSS外部樣式表，去掉代碼中所有設置的紅色實線邊框（border:1pxsolidred）效果。此時界面設計就正式完成，最終樣式效果如圖所示。當前由于尚未使用jQueryAJAX技術獲取數據，因此當前顯示的僅為樣式效果。13.5天氣預報查詢的實現13.5.1jQueryAJAX請求接口的實現 13.5.2根據城市查詢天氣數據的實現13.5.1jQueryAJAX請求接口的實現本示例使用外部JS文件weather.js實現jQuery相關代碼。在本地js文件夾中創建weather.js文件，并在<head>首尾標簽中聲明對JS文件的引用。相關HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQueryAJAX天氣預報查詢的設計與實現</title>4. <linkrel="stylesheet"href="css/weather.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/weather.js"></script>7. </head>13.5.1jQueryAJAX請求接口的實現本示例選用了jQuery$.ajax()方法進行接口請求，并檢測是否獲取到了數據內容。由于城市ID是動態變化，因此聲明自定義函數getWeather(cityID)，根據參數cityID的不同，獲取對應城市的氣象數據。在weather.js中使用jQuery$.ajax()方法調用免費API獲取數據的代碼如下：1. //換成您自己的密鑰2. varkey='abcd123456換成您自己的密鑰';3. //獲取指定城市的天氣預報數據4. functiongetWeather(cityID){5. $.ajax({6. url:"/v7/weather/now?key="+key+"&location="+cityID,7. method:"GET",8. dataType:"json",9. success:function(data){10. //獲取失敗11. if(data.code!="200")return;12. //當前氣候13. varnow=data.now;14. //更新當前氣候相關數據15. $("#icon").attr("src","image/icons/"+now.icon+".png");//圖標16. $("#temp").text(now.temp);//氣溫17. $("#text").text(now.text);//氣候（晴、多云等描述）18. $("#feelsLike").text(now.feelsLike);//體感溫度19. $("#humidity").text(now.humidity);//濕度20. $("#precip").text(now.precip);//降水量21. $("#pressure").text(now.pressure);//氣壓22. $("#vis").