开发者学堂课程【Ajax 前端开发入门与实战：天气信息查询案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8554
天气信息查询案例
天气查询案例
接口地址如下：
地址：htp:// cdn.weather.hao.360.cn/api weather_info.php
作用描述:获取天信息
请求类型:Get 请求
参数: app:hao360 固定参数
code: 城市的编号( 101010100北京，101020100上海， 101280101广州，101280601 深圳)
_jsonp: 回调函数名称
返回数据格式: jsonp 格式
返回字段说明: area 地区信息
pm25: pm2.5 数据
pubdate:数据发布日期
Pubdate:数据发布时间
time:时间戳
weather:天气信息
date:时间
day：白天
night：黑夜
dawn：黎明
地址接口是 jsonp 格式的接口，需要通过跨域的技术解决方案来获取相关的数据。
简单的通过浏览器进行一个接口地址的访问，打开浏览器输入地址后将相关的参数不全。
第二个参数 code，把参数进行拼接通过”&“拼接，code=101010100（北京城市的编码），除此之外还需要 _jsonp（决定回调函数名称，它的本质是由服务器返回一个函数调用）再进行拼接 _jsonp=abc，如下图表示：
回车后的结果如图得到一个数据，这个数据关于 abc 的一调用方法
如把 abc 改为 haha ,就是 haha 的调用方法，如图：
因此服务器就是通过 _jsonp 来得到 haha 这个字符串，将我们相关的数据信息以函数调用的方式传递给前端。
可以把上图的数据进行格式化，复制上图 _jsonp 格式字符串放到 Sublime 粘贴上去后按快捷键 Ctrl+Alt+O 可以把相关数据进行格式化，进行格式化要把最前面haha 去掉因为只有括号里面才是 _jsonp 格式字符串，
把特殊符号”\u5317\u4eac”转译成中文“北京”。
在 Sublime 中按的快捷键需要安装 Pretty JSON 这个插件。
安装插件的步骤：
点击 Package Control 后再点击 Instali Package ,稍等片刻弹出一个输入框，在输入框中输入 Pretty JSON 进行安装。
第二种方式可以借助互联网，在百度搜索 json 数据格式化点击进去
复制代码粘贴进输入框点击校验也能得到 json 数据格式化的操作。
选择城市后点击查询按钮，就可以将天气信息查询出来，就可以展示在“info”的
下边。
打开浏览器输入 www.zhangsan.com。
点击 08 weather/ 后进入
再点击 get weather.html 就会出现如下界面：
点击城市进行查询就可以获得相关天气信息，天气信息是分日期的，每个日期下面都有它的白天、夜间、黎明的信息。将这里的信息获得读取信息的获取操作。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>获取天气信息</title>
<script type="text/javascript" src=”jquery.js”>
</script>
<script type="text/javascript” src=”template.js”>
</script>
<script type="text/html” id=”weatherTemplate”>
{{each weather as value i}}
<div><span>{{value.date}}</span>
<ul><li>白天天气:{{value.info.day[1]}}</li>
<li>白天温度:{{value.info.day[2]}}</li>
<li>白天风向:{{value.info.day[3]}}</li>
<li>白天风速:{{value.info.day[4]}}</li>
</ul><ul><li>夜间天气:{{value.info.night[1]}}</li>
<li>夜间温度:{{value.info.night[2]}}</li>
<li>夜间风向:{{value.info.night[3]}}</li>
<li>夜间风速:{{value.info.night[4]}}</li>
</ul>
{{if value.info.dawn}}<ul><li>黎明天气:{{value.info.dawn[1]}}</li>
<li>黎明温度:{{value.info.dawn[2]}}</li>
<li>黎明风向:{{value.info.dawn[3]}}</li>
<li>黎明风速:{{value.info.dawn[4]}}</li>
</ul></div>
{{/each}}
</script>
$(function(){
$(”#query”.click(function(){
//将用户所选择的城市信息的天气预报情况查询出来
var code = $("#city" ).val();
Console.log(code);
$.ajax({
Url:”htp:// cdn.weather.hao.360.cn/api weather_info.php”
data:{
app:”hao360”,
code:code
},
jsonp:”_jsonp”
dateType:”jsonp”
success:function(data){
console.log(data);
var html = template(“weatherTemplate”,date);
$(“#info”).html(html);
}
});
});
});
<style type="text/css">
#containerfwidth:400px ;
min-height:300pх;
background-color:lightgreen;
margin:auto;
padding:10px;text-align:center;}
ul{
list-style:none;
text-align:left;
}</style>
</head><body>
<div id = ”container”>
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101280101">广州</option>
<option value="101280601">深圳</option>
</select>
<input type=”button” value=”查询” id=”query”>
<div id=”info”>
</div>
</div>
</body>
</html>
Val 代表的含义，他所代表的含义是我们所选择的 option 所对应的 value 值，option 所对应的 value 值就是 select 元素的 value 值
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101280101">广州</option>
<option value="101280601">深圳</option>
</select>
将 code 用户所选择的城市信息传递到 url 中城市所对应的天气。Url 的地址是在接口文档中所体现出来的地址。
放到代码当中,业务逻辑参数 hao360; 城市编码。
dataType 不能忘记，必须得是 jsonp 我们才可以获取到相关的数据
把
success:function(data){
console.log(data);
html 片段生成,片段生成放在 info下面
两个参数 dateType 一定要是 jsonp；
第二个就是 jsonp 所指定的值，我们服务器就是通过这个值来获取到回调函数的名称。
