如何在 HTML 中调用 REST API

Bun*_*nny 3 html javascript database api rest

API Noob 在这里,我真的很难弄清楚 API 和谷歌教程让我认为它们比我认为的更先进。这是我想要做的:

创建一个简单的网页,让我可以搜索位于此 pokemon API 的信息:https : //pokeapi.co/

谁能帮我弄清楚如何编写一个函数来使其工作?

<!DOCTYPE html>
<html>
<body>

<h1>PokeMon Search API</h1>

<script>//javascript function here?</script>
 
  <input id="text" type="text" value="" style="Width:20%"/> 
  <button>Find PokeMon By Name</button>

<p>Results</p>   
  <div v-html="link.FUNCTIONVARIABLE"></div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助!

Miz*_*aeL 10

你在这里需要一些Javascript。这样的事情应该工作:

<script type="text/javascript">
    var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
    fetch(apiUrl).then(response => {
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
    });
</script>
Run Code Online (Sandbox Code Playgroud)

这段代码使用 fetch 函数(这里有更多信息)向包含在apiUrl变量中的 url 发出 GET 请求。您可能希望使用 HTML 输入标记使 Pokemon 名称动态化。

  • 您应该添加一些解释或文档链接,而不是转储代码作为您的答案。OP 可能不明白什么是 `fetch`,或者 promises 是什么以及它们是如何工作的。 (2认同)