《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH13 天气预报查询的设计与实现

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").