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 使用，但是当它是脚本时它却没有。任何帮助都会很棒！

捷运

编辑：Firebase 分析正在运行，其状态代码为“200”。但是 API 没有任何状态代码或错误消息。更新了代码，现在有一个错误“400”，所以它仍然不起作用，但我现在可以解决它。谢谢大家的帮助！

Answer 1

解决方案 1

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

<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 with 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');
  }

}

XMLHttpRequest 和 Fetch 无法正常工作

XMLHttpRequest and Fetch not functioning

javascript

html

openweathermap