XMLHttpRequest 和 Fetch 不起作用

Question

因此，我正在开发我的第一个项目，该项目使用 JavaScript 和 HTML，它是一个基本的天气网页。用户输入他们的位置，它就会显示当前的天气。 HTML 工作顺利，但 JavaScript 却总是塞满。奇怪的是控制台中没有错误，所以它应该工作得很好。

这是 HTML 部分：

<section id="weather">
            <div id="nav">
                <div id="locate">
                    <div id="container">
                        <form id="location-form">
                            <label for="location">Location (eg. London,uk):</label>
                            <input type="text" id="location" name="location" required>
                            <button type="submit" form="location-form" formnovalidate>Let's Go!</button>
                        </form>
                    </div>
                </div>
                <div id="weather-output">
                 <!-- Output of API goes here -->
                    
                </div>
            </div>
</section>

这是我的 JavaScript。我使用脚本标签嵌入了它，因为它没有检测到按钮按下。

<script type="text/JavaScript">
        function fetchAPIData() {
         const locationInput = document.getElementById("location");
         const locationValue = locationInput.value;
         const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API_URL`;
         // do the URL Request
         async function xmlrequest() {
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
                // Typical action to be performed when the document is ready:
                document.getElementById("weather-output").innerHTML = xhttp.responseText;
               }
             };
             xhttp.open("GET", url, true);
             xhttp.send();
            }
         xmlrequest(); 
        }
        //listens for button on html side and runs fetchAPIData()
        document.addEventListener("DOMContentLoaded", () => {
         document.querySelector("button[type=submit]").addEventListener("click", fetchAPIData);
      
        }
        );
</script>

我已经尝试过 XMLHttpRequest（如上所示）和 Fetch。既不工作，也不运行，也不显示错误。我正在使用 OpenWeatherMap，我有一个 API 密钥，它作为一个普通的 url 工作，但当它是脚本时，它就没有。任何帮助都会很棒！

mrt

编辑：Firebase 分析正在运行，其状态代码为“200”。 不过，API 没有任何状态代码或错误消息。现在更新了代码，出现错误“400”，因此它仍然不起作用，但我现在可以对其进行故障排除。谢谢大家的帮助！

Answer 1

解决方案 1

问题是您将按钮类型写为“submit”：

<button type="submit" form="location-form" formnovalidate>Let's Go!</button>

尝试 type="button":

<button type="button" form="location-form" formnovalidate>Let's Go!</button>

并修改 js：

document.querySelector("button[type=button]").addEventListener("click", fetchAPIData);

解决方案 2

使用 e.preventDefault() 函数：

function fetchAPIData(e) {
         e.preventDefault();
         const locationInput = document.getElementById("location");
         const locationValue = locationInput.value;
         .....

Answer 2

除了 James 写的 fetch 与 async/await 应该仍然是这里的前进方向。

一个基本的（人为的）例子：

// Make this function async
async function fetchAPIData() {

  // Get the value from your input
  const { value } = locationInput;

  const endpoint = `http://api.openweathermap.org/data/2.5/weather?q=${value}&APPID=API_URL`;

  // Await the response
  const response = await fetch(endpoint);

  // If it's ok parse the data and update the DOM
  // otherwise throw an error
  if (response.ok) {
    const data = await response.json();
    output.innerHTML = data;
  } else {
    throw new Error('Bad response');
  }

}