如何获取用户输入以获取 api url？

Question

//OpenWeather Info
const weatherKey = '*********';
const weatherURL = 'https://api.openweathermap.org/data/2.5/weather'

//Page Elements
const input = document.querySelector("#input").value;
const button = document.querySelector('#submit');

//Fetch
const getWeather = async () => {
    try {
        const apiURL = weatherURL+ "?&q=" + input + "&APPID=" + weatherKey;
        console.log(apiURL);
        const response = await fetch(apiURL);
        if (response.ok) {
            const jsonResponse = await response.json();
            console.log(jsonResponse);
            return jsonResponse;
        } else {
            console.log("request failed!");
        }
    } catch (error) {
        console.log(error);
    }
**}**

const renderWeather = (data) => {
    document.querySelector("#weather-degrees").innerHTML = data.main.temp;
}

const executeSearch = () => {
    getWeather().then(data => renderWeather(data));
}

button.addEventListener('click', executeSearch());

当我在文本框中键入时，我无法获取输入的值，并且它不会获取 apiURL。在我输入任何东西之前，控制台就给了我这个。有什么帮助吗？ console logs

Answer 1

您的input 已预先设置一次。相反，请执行以下操作：

const input = document.querySelector("#input");
// ...
const apiURL = weatherURL+ "?&q=" + input.value + "&APPID=" + weatherKey;
// or using a template literal
const apiURL = `${weatherURL}?&q=${input.value}&APPID=${weatherKey}`;

请注意，您还应该URL encode 输入。

由于input 现在只设置了一次，所以它被设置为一个空字符串。您可以直接访问 API url，即 https://api.openweathermap.org/data/2.5/weather?APPID=82510feaa0c1d3a300a7a754ff134404&q= 并注意它不起作用。如果您将 q= 替换为适当的值，例如q=London，它会正常工作的。

请注意，如果您将无效城市传递给 API，API 也会返回 400 错误（但带有不同的错误消息）。从响应正文中读取错误并正确向用户显示有关无效输入的错误。