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

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

前端代码

点击查看代码

**<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. 定义appKey
        const 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.调用API
                const 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;
    }