javascript - 如何发送 REST 调用并返回 json 和结果？

Question

当有人写下姓名并单击搜索按钮时，我想将搜索结果从外部 result.json 文件显示到无序列表中。我只是遇到如何获取结果并显示到列表中的问题。请帮助我。我会很感激。下面是我的代码。

index.html 文件

<form method="POST">
<label>Search</label>
<input type="text" id="Search" />
<input type="submit">
</form>
   <!-----Show result here-->
<ul>
 <li>

 </li>   
</ul>

<script>
const userAction = async () => {
  const response = await fetch('test.json', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson


}

</script>


result.json file
[
 {
     "id":1,
      "name":"John",
      "City":"Melbourne",
      "state":"VIC"

 }


]

Answer 1

为了演示，有必要用占位符替换您的源。

const list = document.getElementById('list');

const userAction = async (event) => {
  event.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(todos => {
    todos.forEach((todo) => {
      const li = document.createElement('li');

      li.innerHTML = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;

      list.appendChild(li);
    });
  })
}

<form method="POST" onsubmit="userAction(event);">
  <label>Search</label>
  <input type="text" id="Search" />
  <input type="submit">
</form>

<!-----Show result here-->
<ul id="list"></ul>