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

在前端中设置一个输入框和一个按钮
输入框负责传入参数（城市名称参数），点击按钮后进行查询

前端代码

点击查看代码

**<div class="container">**
**        <h2>城市天气查询</h2>**
**        <div class="input-group">**
**            <input type="text" id="city" placeholder="请输入城市（如:上海）">**
**            <button onclick="queryWeather()">查询</button>**
**        </div>**
**        <div id="result" class="weather-box"></div>**
**    </div>**

本次调用天气预报接口同样是调用的万维易源的API，所以其查询规则也是按照万维易源的查询规则来写的 我们先定义自己appKey，以及定义API地址

点击查看代码

//1. 定义appKeyconst APP_KEY = "546f700537c64a40a42Fbf565dF06290";//2. API地址const API_URL = "http://route.showapi.com/9-2";

声明一个函数queryWeather ①获取到输入框的值以及div区域

点击查看代码

async function queryWeather(){const city = document.getElementById("city").value.trim();const resultDom = document.getElementById("result");

②校验城市输入是否正确

点击查看代码

//校验输入if (!city) {resultDom.innerHTML = "<p class='error'>请输入城市名称</p>";return;}

③查询过度中显示加载状态

点击查看代码

//显示加载状态resultDom.innerHTML = "<p class='loading'>正在查询天气...</p>";

④构造请求参数，包括appKey和城市参数，如果需要其他参数，可根据API文档添加 ⑤调用API，并将返回的数据更改为json格式 ⑥解析返回数据，并根据API文档设置拼接展示内容，如需展示更多的内容，可根据API文档进行更改 ⑦最后设置一下报错信息

点击查看代码

      try{//4.构造请求参数(包含appKey和城市)const params = new URLSearchParams({appKey: APP_KEY,//核心：传递appKey作为认证参数area:city,//城市参数(以文档要求为准)//其他可选参数（如，日期，天数，根据API文档添加）});//5.调用APIconst response = await fetch(`${API_URL}?${params}`)const data = await response.json();//6.解析返回数据(根据API文档的结构调整)//假设API成功返回Code为0，具体以文档为准if (data.showapi_res_code === 0){const wearherInfo = data.showapi_res_code;const today = weatherInfo.f1;// 拼接展示内容resultDom.innerHTML = `<p>城市：${weatherInfo.cityInfo.c4}</p><p>日期：${today.day}</p><p>天气：${today.day_weather}</p><p>温度：${today.day_air_temperature}</p><p>风向：${today.night_wind_direction}</p><p>日出日落时间：${today.sun_begin_end}</p>`}else{//API返回错误信息（如城市不存在：appKey无效）resultDom.innerHTML = `<p class='error'>错误：${data.showapi_res_error || "查询失败"}</p>`;}}catch(error){//网络错误（如跨域、连接失败）resultDom.innerHTML = `<p class='error'>网络错误：${error.message}</p>`;}}//页面加载时默认查询window.onload =queryWeather;

附：css代码：

点击查看代码

    .container {max-width: 500px;margin: 50px auto;padding: 20px;border: 1px solid #ddd;border-radius: 10px;}.input-group {margin-bottom: 20px;}input {padding: 8px;width: 200px;margin-right: 10px;}button {padding: 8px 16px;cursor: pointer;}.weather-box {margin-top: 20px;padding: 15px;border: 1px dashed #666;border-radius: 5px;}.error {color: #f00;}.loading {color: #666;}