本实验通过Ajax技术实现城市天气预报查询,帮助学习者深入理解Ajax的工作机制,掌握API接口文档的阅读方法,并将其有效应用于实际开发场景中。
1、 解读接口文档
2、 请求地址即为Ajax的URL,若采用GET方式发送请求,则参数需附加在URL末尾。例如:https://xxx.com/api/?id=xxx&type=xxx,其中id和type便是GET请求所携带的参数。这种方式通过查询字符串传递数据,每个参数以键值对形式存在,多个参数之间用&符号连接,构成完整的请求链接。
3、 必填项为必须上传的参数,否则可不传递。
4、 返回数据通常为JSON格式,图中参数值后的注释即为对应返回参数的具体说明。
5、 编写JavaScript核心功能代码
6、 查看Ajax请求的返回数据内容
7、 编写完JavaScript代码后,通过浏览器打开页面,进入控制台的Console面板,即可查看Ajax请求返回的数据。
8、 通过浏览器控制台的Network选项,可查看Ajax请求的具体过程。
9、 通过分析控制台输出的结果可知,返回内容为一个对象,只需从中提取所需属性值即可,例如使用 console.log(result.city) 获取城市信息。
10、 全部源码
11、 通过Ajax获取数据后,进一步优化和完善当前实例功能。
