jQuery API 获取请求无效。控制台日志显示工作 link。 Link 有结果。我错过了什么？

Question

我正在向啤酒厂提出请求 API。简单的代码，看起来不错我已经尝试对其进行故障排除。我无法弄清楚错误是什么。这是记录工作 link 但没有获取结果

的 js 文件

So this is the link to the repl, which should make it easier.



'use strict';


function getBreweries(state) {
  const url = `https://api.openbrewerydb.org/breweries/search?query=${state}`;
  console.log(url)
  fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    displayResults(responseJson)
  }
    );
  
}

function displayResults(responseJson) {
  console.log(responseJson);
  for (let i=0; i< responseJson.length; i++){
    console.log(responseJson[i].name);
    $('#js-search-results').html(responseJson[i].name);
  }

}

function watchForm() {
$('form').submit(event =>{
  const stateRaw = $('#js-query').val();
  const stateArray = stateRaw.split(" ");
  const state = stateArray.join("_");
  console.log(state);
  getBreweries(state);
})
}

$(watchForm);

在这里，我们有 html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Find a brewery</h1>
    <form action="#" id="js-search-form">
      <label for="state-entry">Search by state:</label>
      <input type="text" id="js-query" placeholder="New York">
      <input type="submit" value="Search"></input>
    </form>
    <section id="js-search-results">
            
    </section>
    <script src="index.js"></script>
  </body>
</html>

感谢您的帮助

Answer 1

几件事。

您需要在 watchForm() 中添加 event.preventDefault() 以防止表单元素尝试其默认操作（向 action 属性中输入的路径发送请求）。
将 $('#js-search-results').html(); 更改为 $('#js-search-results').append();。否则你会在每个循环中覆盖之前的结果。

示例：

'use strict';

function getBreweries(state) {
  const url = `https://api.openbrewerydb.org/breweries/search?query=${state}`;
  console.log(url)
  fetch(url)
  .then(response => response.json())
  .then(responseJson => {
    displayResults(responseJson)
  }
    );
  
}

function displayResults(responseJson) {
  console.log(responseJson);
  $('#js-search-results').html("<ul></ul>")
  for (let i=0; i< responseJson.length; i++){
    console.log(responseJson[i].name);
    $('#js-search-results ul').append("<li>" + responseJson[i].name + "</li>");
  }

}

function watchForm() {
$('form').submit(event =>{
  event.preventDefault();
  const stateRaw = $('#js-query').val();
  const stateArray = stateRaw.split(" ");
  const state = stateArray.join("_");
  console.log(state);
  getBreweries(state);
})
}

$(watchForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h1>Find a brewery</h1>
<form action="#" id="js-search-form">
  <label for="state-entry">Search by state:</label>
  <input type="text" id="js-query" placeholder="New York">
  <input type="submit" value="Search"></input>
</form>
<section id="js-search-results">

</section>

jQuery API 获取请求无效。控制台日志显示工作 link。 Link 有结果。我错过了什么？

jQuery API fetch request is not working. Console log shows working link. Link has results. What am I missing?

javascript

api

console

jquery

fetch