我想创建一个接口，根据啤酒厂/啤酒名称获取啤酒厂信息。我将 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>
从位于 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 服务器上的端点，从而完全在客户端进行处理。