如何在JavaScript脚本中通过OpenWeather API实现多城市天气查询

1. 补充页面搜索结构 #

在HTML页面中添加用户输入交互模块，示例代码如下：

<!-- 搜索区域可放在页面顶部 -->
<input type="text" id="cityInput" placeholder="输入要查询的城市名">
<button id="searchBtn">查询天气</button>

2. 调整JS逻辑实现动态参数替换 #

核心逻辑是将固定写死的城市参数，替换为读取用户输入的动态值，拼接请求地址前对城市名做编码处理，兼容中文、带特殊字符的城市名，修改后的完整代码如下：

// 封装可传参的天气查询函数
async function getData(cityName) {
  // 对城市名做编码处理，避免中文、空格导致的请求异常
  const encodedCity = encodeURIComponent(cityName.trim())
  // 用模板字符串动态拼接请求地址
  const res = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${encodedCity}&appid=f6273c080b02e6439d700a66353fe6ed`
  );
  const data = await res.json();
  console.log(data);
  // 后续可在此处添加将天气数据渲染到页面的逻辑
}

// 绑定搜索按钮点击事件
const searchBtn = document.querySelector('#searchBtn')
const cityInput = document.querySelector('#cityInput')

searchBtn.addEventListener('click', () => {
  const inputCity = cityInput.value
  // 简单判空，避免无效请求
  if (inputCity.trim()) {
    getData(inputCity)
  } else {
    alert('请输入城市名称后再查询')
  }
})

// 可选优化：支持回车键触发查询
cityInput.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') {
    searchBtn.click()
  }
})

注意事项 #

• 中文城市名可直接输入，encodeURIComponent会自动转成API可识别的编码格式
• 要提升城市匹配准确率，可提示用户输入城市名后加国家码，比如广州,cn，避免匹配到其他国家的同名城市
• 可添加响应状态判断，当输入不存在的城市时API会返回404状态，可对应做友好提示

内容的提问来源于stack exchange，提问作者Florence H.