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

Stack Overflow用户

提问于 2021-11-05 21:49:31

回答 1查看 85关注 0票数 0

当我在输入中写了一些东西，然后按下搜索，我想从包含该单词的电影中获取标题，我该怎么做？我正在使用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

Stack Overflow用户

发布于 2021-11-05 21:57:08

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

您还可以通过允许发生默认表单提交操作来重新加载页面，而不是使用event.preventDefault()在表单提交发生时取消页面重新加载，然后调用您的函数。我修改了您的函数以包含一个用于搜索的name参数。下面的代码应该可以完成您想要的操作，但是由于您没有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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69859607

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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