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

Posted 2023-03-15

【中文标题】如何使用 Javascript 和 Ajax 从 API 获取数据？

【英文标题】：How do I get the data from API using Javascript and Ajax?

【发布时间】：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>

【参考方案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>