《JavaScript與jQuery網(wǎng)頁(yè)前端開發(fā)與設(shè)計(jì)-第2版》課件 CH13 天氣預(yù)報(bào)查詢的設(shè)計(jì)與實(shí)現(xiàn)

JavaScript與jQuery

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

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

km/h英里/小時(shí)

mile/h能見度公里

km英里

mile大氣壓強(qiáng)百帕

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

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

<imgid="icon">元素：用于顯示氣候描述對(duì)應(yīng)的天氣圖標(biāo)。圖標(biāo)素材可以自行準(zhǔn)備，也可以從和風(fēng)天氣官網(wǎng)下載（/docs/start/icons/）；

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

<spanid="text">元素：用于顯示當(dāng)前城市的氣候描述，例如多云、晴等。1. <!--2天氣描述區(qū)域-->2. <divid="weather">3. <!--2-1氣象圖標(biāo)-->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>當(dāng)前由于尚未使用jQueryAJAX技術(shù)獲取數(shù)據(jù)，因此當(dāng)前顯示的僅為樣式效果。13.4.4實(shí)況氣象數(shù)據(jù)版塊設(shè)計(jì)該版塊是id="now"的<table>元素內(nèi)部?jī)?nèi)容，主要包含體感溫度、相對(duì)濕度、降水量、氣壓、能見度和風(fēng)力共計(jì)6種實(shí)時(shí)氣象數(shù)據(jù)。相關(guān)HTML5代碼片段如下：1. <!--3實(shí)況數(shù)據(jù)-->2. <tableid="now">3. <!--3-1第一行（數(shù)據(jù)）-->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>相對(duì)濕度</td>13. <td>降水量</td>14. </tr>15. <!--3-3第三行（數(shù)據(jù)）-->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>風(fēng)力</td>26. </tr>27. </table>13.4.4實(shí)況氣象數(shù)據(jù)版塊設(shè)計(jì)表格共計(jì)四行三列，其中第1、3兩行為實(shí)況氣象數(shù)據(jù)，第2、4兩行為上一行數(shù)據(jù)對(duì)應(yīng)的文字描述。最后整理一下CSS外部樣式表，去掉代碼中所有設(shè)置的紅色實(shí)線邊框（border:1pxsolidred）效果。此時(shí)界面設(shè)計(jì)就正式完成，最終樣式效果如圖所示。當(dāng)前由于尚未使用jQueryAJAX技術(shù)獲取數(shù)據(jù)，因此當(dāng)前顯示的僅為樣式效果。13.5天氣預(yù)報(bào)查詢的實(shí)現(xiàn)13.5.1jQueryAJAX請(qǐng)求接口的實(shí)現(xiàn) 13.5.2根據(jù)城市查詢天氣數(shù)據(jù)的實(shí)現(xiàn)13.5.1jQueryAJAX請(qǐng)求接口的實(shí)現(xiàn)本示例使用外部JS文件weather.js實(shí)現(xiàn)jQuery相關(guān)代碼。在本地js文件夾中創(chuàng)建weather.js文件，并在<head>首尾標(biāo)簽中聲明對(duì)JS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQueryAJAX天氣預(yù)報(bào)查詢的設(shè)計(jì)與實(shí)現(xiàn)</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請(qǐng)求接口的實(shí)現(xiàn)本示例選用了jQuery$.ajax()方法進(jìn)行接口請(qǐng)求，并檢測(cè)是否獲取到了數(shù)據(jù)內(nèi)容。由于城市ID是動(dòng)態(tài)變化，因此聲明自定義函數(shù)getWeather(cityID)，根據(jù)參數(shù)cityID的不同，獲取對(duì)應(yīng)城市的氣象數(shù)據(jù)。在weather.js中使用jQuery$.ajax()方法調(diào)用免費(fèi)API獲取數(shù)據(jù)的代碼如下：1. //換成您自己的密鑰2. varkey='abcd123456換成您自己的密鑰';3. //獲取指定城市的天氣預(yù)報(bào)數(shù)據(jù)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. //當(dāng)前氣候13. varnow=data.now;14. //更新當(dāng)前氣候相關(guān)數(shù)據(jù)15. $("#icon").attr("src","image/icons/"+now.icon+".png");//圖標(biāo)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").