如何开发一个简单的天气查询应用_利用API和JavaScript获取天气信息

OpenWeatherMap是最稳妥的免费稳定天气API，新用户享每分钟1000次调用，支持多查询方式；需规避需验证或聚合中转类API，API key须存环境变量；错误处理需关注401、404、429响应；数据渲染禁用innerHTML，应使用textContent和属性赋值；本地开发跨域问题须通过本地HTTP服务或代理解决。

怎么选免费又稳定的天气 API

OpenWeatherMap 是目前最稳妥的选择，新注册用户直接获得每分钟 1000 次调用配额，current 接口返回结构清晰、字段完整，且支持城市名、经纬度、IP 地理定位三种查询方式。避免用需要邮箱验证或强制绑定支付方式的接口（比如某些国内平台要求企业资质），也别碰返回格式不一致的聚合类中转 API —— 它们常把 404 错误伪装成 200 成功响应，导致前端逻辑误判。

注册后拿到的 API key 要藏在环境变量或服务端代理里，千万别硬编码进前端 JS 文件，

用 fetch 调天气接口时怎么处理常见错误

天气请求失败不全是网络问题，更多是参数或权限原因。必须检查三类响应：

• 401 Unauthorized：API key 错了或没生效，等 5 分钟再试（OpenWeatherMap 有时有缓存延迟）
• 404 Not Found：城市名拼错，比如 shangahi；或者用了中文城市名但没加 lang=zh_cn 参数
• 429 Too Many Requests：本地开发时反复刷新没加防抖，建议加个 setTimeout 限制手动重试间隔

示例请求片段：

fetch(`https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=${key}&units=metric`)

怎么把 JSON 天气数据安全塞进 HTML 页面

别用 innerHTML += 拼接字符串，容易触发 XSS —— 如果 API 返回的 name 字段被注入了 标签，就完了。一律用 textContent 或属性赋值：

• 城市名：document.getElementById('city').textContent = data.name
• 温度：document.getElementById('temp').textContent = Math.round(data.main.temp)
• 图标：img.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`

特别注意 data.weather[0].description 是英文，要显示中文就得自己建映射表，比如 {'clear sky': '晴天', 'scattered clouds': '少云'}，不能依赖 API 自动翻译。

为什么本地开发时总报跨域错误，但部署后好了

因为 OpenWeatherMap 接口本身支持 CORS，但浏览器对 file:// 协议页面完全禁用 fetch，所以双击 HTML 运行必失败。解决方法只有两个：

• 用 VS Code 的 Live Server 插件启一个本地 http://127.0.0.1:5500 服务
• 或者写个极简 Node.js 代理（3 行代码），把请求从 /weather 转发到 OpenWeatherMap，绕过浏览器同源策略

别信“改 Chrome 启动参数禁用安全策略”这种方案，它只在你本机有效，没法给其他人演示。

# ai  # 浏览器  # app  # js  # json  # javascript  # java  # html  # 编码  # 字符串  # 接口  # chrome  # node  # 前端  # node.js  # xss  # math 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】