api请求后如何显示结果？(js)

Question

我正在尝试通过搜索实现良好读取 API，但我可以发出请求，但我不知道如何显示它。我试图找到教程，但没有。编辑 - 让它工作，谢谢大家 <3应用程序.jsvar input = document.querySelector('.input_text');var main = document.querySelector('#name');var temp = document.querySelector('.author');var desc = document.querySelector('.title');var button= document.querySelector('.button');document  .querySelector('input[type="button"]')  .addEventListener("click", function () {  const input = document.querySelector('input[type="text"]').value;  fetch("https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=" + input)      .then((response) => response.json())      .then(data => {     console.log(data)  var nameValue = data['obj_id'];  var descValue = data['reasults'][0]['title'];  reasults.innerHTML = nameValue;  desc.innerHTML = "Desc - "+descValue;  input.value ="";  })})html <div class="input">      <input type="text" placeholder="Enter the city" class="input_text">      <input type="button" value="button" class="button">    </div>  </div>  <div class="container">    <div class="card">      <h1 class="name" id="name"></h1>      <p class="type"></p>      <p class="title"></p>    </div>  </div><script src="app.js"></script></body></html>抱歉，第一次使用 api 时代码混乱，非常感谢:)。

Answer 1

你几乎所有事情都做对了，但有一件小事。json( )当您在 上使用该函数时Promise.prototype.then( )'s response，结果又是一个 Promise。这就是它的工作原理，因此您需要Promise.prototype.then( )在结果上再次使用该函数才能获取实际数据。就像下面这样：

    button.addEventListener("click", function (name) {

  fetch(

    "https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=" + input.value

  )

    .then((response) => response.json())

    .then((data) => console.log(data));

});

这是一个显示相同内容的示例：

document

  .querySelector('input[type="button"]')

  .addEventListener("click", function () {

  const input = document.querySelector('input[type="text"]').value;  fetch("https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=" + input)

      .then((response) => response.json())

      .then((data) => console.log(data));

  });

<input type="text">

<input type="button" value="Search">

Answer 2

您可以尝试以这种方式使用ajax，如果您没有获取单行，则需要循环数据

$.get("url",function(data,status){

     var list = JSON.parse(data);

       //only loop for more than one row

      for(var  i = 0; i<list.lenvth; i++){

             document.getElementById('title').innerHTML  = list[i].title;

       }

});

Answer 3

API 的响应在response.json(). 因此，要检查您是否获得了所需的响应，您可以尝试执行此操作并检查控制台。

button.addEventListener('click', function(name){

fetch('https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q='+input.value)

.then(response => response.json()).then(data=>console.log(data))

})

一旦您确认这正是您所期望的，您的下一个目标就是在页面上显示数据。为此，请查看响应的结构并决定要显示的内容。然后，您可以使用函数生成所需的 HTML，然后将其作为子节点附加到页面上的节点中。

您可以将所有内容构建为字符串，在需要的地方插入数据，然后将容器节点设置.innerHTML为您构建的字符串。

或者，您可以使用命令来创建所有节点，例如按照document.createElement("div")您想要的方式构建节点并用于.appendChild将其显示在页面上