如何使用 Javascript 和 Ajax 从 API 获取数据？答案

【问题标题】：How do I get the data from API using Javascript and Ajax?如何使用 Javascript 和 Ajax 从 API 获取数据？
【发布时间】：2021-12-19 21:13:24
【问题描述】：

当我在输入中写一些东西然后按搜索时，我想从包含该词的电影中获取标题，我该怎么做？我正在使用 omdb API。例如，如果我搜索“蝙蝠侠”，我想获取所有包含“蝙蝠侠”的电影标题。现在，当我搜索蝙蝠侠时，我只会得到一部蝙蝠侠电影。

document.getElementById("getForm").addEventListener("submit", (e) => {
    e.preventDefault();
    loadMovies(document.querySelector("input[name='query']").value);
  });
  
  function loadMovies(name) {
    var omdbAPI = new XMLHttpRequest();
    var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie&apikey=`;
    omdbAPI.open("get", omdbURL, true);
  
    omdbAPI.onload = function(event) {
      event.preventDefault();
  
      if (this.status == 200) {
        var result = JSON.parse(this.responseText);
  
        console.log(result);
  
        var output = "";
          output +=
            '<div class="user">' +
            '<h3>Titel: ' + result.Title + '</h3>' +
            '<p>Year: ' + result.Year + '</p>' +
            '</div>';
        document.getElementById('result').innerHTML = output;
      } else {
        alert("No results");
      }
    }
  
    omdbAPI.send();
  }

<form action="" method="get" id="getForm">
  Movie: <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<div id="result">
            
</div>

【问题讨论】：

标签： javascript ajax api

【解决方案1】：

您没有得到任何结果，因为 OMDB 需要 API 密钥，而您没有提供。发送正确的 GET 请求时，您会收到以下响应：{"Response":"False","Error":"No API key provided."}。

您还通过允许发生默认表单提交操作来重新加载页面，而不是使用event.preventDefault() 在表单提交发生时取消页面重新加载，然后调用您的函数。我修改了您的函数以包含要搜索的名称参数。下面应该完成你想要的，但由于你没有 API 密钥，你仍然不会得到任何结果。前往here，获取 API 密钥。

document.getElementById("getForm").addEventListener("submit", (e) => {
  e.preventDefault();
  loadMovies(document.querySelector("input[name='query']").value);
});

function loadMovies(name) {
  var omdbAPI = new XMLHttpRequest();
  var omdbURL = `http://www.omdbapi.com/?t=${name.replace(" ", "%20")}&type=movie`;
  omdbAPI.open("get", omdbURL, true);

  omdbAPI.onload = function(event) {
    event.preventDefault();

    if (this.status == 200) {
      var result = JSON.parse(this.responseText);

      console.log(result);

      var output = "";
      for (var i in result) {
        output +=
          '<div class="user">' +
          '<h3>Titel: ' + result.Title + '</h3>' +
          '</div>';
      }
      document.getElementById('result').innerHTML = output;
    } else {
      alert("No results");
    }
  }

  omdbAPI.send();
}

<form action="" method="get" id="getForm">
  Movie: <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<div id="result">

</div>

【讨论】：