显示基于输入值的数据

Question

我想根据输入的值显示来自API的数据，但是在我甚至在输入框中键入内容之前，它都会在我键入后立即读取框中的值（在这种情况下，它是未定义的，因为我没有输入任何内容。

这是我试图做的：

fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" +
    countryInput.value, {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
        "x-rapidapi-key": "20438f9eb4mshb2a68ca50196b46p1d55a5jsn2dbdc2b012cd"
      }
    })
  .then(response => {
    return response.json();
  })
  .then(data => {

      countryInput = inputElement.value

（代码保持打开状态）

Answer 1

在Java语言中，当您想做某事当其他事情发生时（例如，当输入发生更改时），您必须使用事件侦听器。特别是对于在输入值更改时触发AJAX请求的情况，您可能需要侦听“模糊”或“更改”事件。

完全解释事件和事件侦听器的工作原理超出了堆栈溢出答案的范围，但是请参阅https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events以获取完整的解释。

Answer 2

这是一个示例，您将如何在输入字段上侦听“ change”事件，并在检测到用户已输入信息时触发提取功能。

尽管值得一提的是，由于用户将输入国家/地区名称，因此回调函数（fetch()）将在完成国家/地区名称的输入之前触发多次，特别是如果国家/地区名称较长名称。每次他们输入新字母时，都会触发对API的调用，并且在大多数情况下不会返回任何结果。这可能被视为浪费了API的资源。

提供一个“提交”按钮，或者等到用户按下Enter键再发送API调用之前，是一个更好的主意。

function fetchTheDataFromTheApi(){
  fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" + 
  countryInput.value, {
  "method": "GET",
  "headers": {
      "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
      "x-rapidapi-key": "20438f9eb4mshb2a68ca50196b46p1d55a5jsn2dbdc2b012cd"
   }
   } )
   .then(response => {
  return response.json();
   })
  .then(data => {
    //do something with the data here like console.log it
		console.log(data)
  })
}

document.getElementById('countryInput').addEventListener("change", fetchTheDataFromTheApi)

<input id="countryInput">