用前端调用天气预报接口,并在页面中显示

在前端中设置出大体框架
image
image
本次调用天气预报接口还是调用的万维易源的,所以编写思路也是按照万维易源的来的
先定义我们的appKey,以及我们的api地址
image
声明函数queryweather,获取输入框的值和div区域
image
校验城市是否输入正确
image
在查询过度中显示加载状态
image
构造请求参数,包括appkey和城市参数,如果需要其他参数,可以根据api文档添加,调用api,并将返回数据更改为json格式,解析返回数据,并根据api文档设置拼接展示内容,需要展示更多内容的话,可以根据api文档进行更改,并将报错代码补充完整。
image
补充:css代码
image

posted @ 2025-12-23 09:24  yangzhijia  阅读(3)  评论(0)    收藏  举报