Question

因此，我想创建一个界面，该界面将根据啤酒厂/啤酒名称获取啤酒厂信息。我将API提取到代码中，但是我不知道如何使用按钮从中获取信息。我希望它向我显示至少两个位置，但每次都会出错。我是JS的新手，在这里很困惑，错误是：找不到404页-提交城市名称时。这是我的代码：

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
  <h1>The Beer Mapping</h1>

  <script>
    fetch("http://beermapping.com/webservice/locquery/API_KEY")
    .then(response=>{
      return response.json()
    }).then(data=>{
      console.log(data)
    }).then(error=>{
      console.log(error)
    }));
  </script>

  <form action="/action_page.php">
   <input type="text" name="City Name">
   <input type="submit" value="submit">
  </form>

 </body>
</html>

Answer 1

从https://beermapping.com/api/examples/处的API的示例页面看，您试图使用的API端点似乎要求在API密钥后提供一个参数： http://beermapping.com/webservice/locquery/API_KEY/QUERY 如果要在浏览器中加载该页面，则会得到一个空白页面（大概是因为未提供有效的API密钥），而不是404错误，因此我假设一旦您提供了API密钥，就应该消除了收到的404错误。

在代码的其余部分，我假设所需的参数基于“城市名称”字段中的用户输入-因此，很可能这是需要在API密钥后传递到查询URL中的参数。

基于表单提交URL是一个PHP文件，一种传递用户输入的方法是在URL中的API密钥之后使用：

fetch("http://beermapping.com/webservice/locquery/API_KEY/<?php echo $_GET['City Name']; ?>")

但是，也可以通过更改表单处理以获取URL而不是在Web服务器上调用终结点来处理整个客户端。

如何创建一个将从API获取信息的接口？

1 个答案: