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

Question

我正在尝试通过搜索实现良好读取 API，但我可以发出请求，但我不知道如何显示它。我试图找到教程，但没有。

编辑 - 让它工作，谢谢大家 <3

应用程序.js

var 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( )在结果上再次使用该函数才能获取实际数据。就像下面这样：&nbsp; &nbsp; button.addEventListener("click", function (name) {&nbsp; fetch(&nbsp; &nbsp; "https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=" + input.value&nbsp; )&nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; .then((data) => console.log(data));});这是一个显示相同内容的示例：document&nbsp; .querySelector('input[type="button"]')&nbsp; .addEventListener("click", function () {&nbsp; const input = document.querySelector('input[type="text"]').value;&nbsp; fetch("https://v1.nocodeapi.com/lap/gr/ZXOgJZwIXeGBhScd/search?q=" + input)&nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; .then((data) => console.log(data));&nbsp; });<input type="text"><input type="button" value="Search">

Answer 2

您可以尝试以这种方式使用ajax，如果您没有获取单行，则需要循环数据$.get("url",function(data,status){&nbsp; &nbsp; &nbsp;var list = JSON.parse(data);&nbsp; &nbsp; &nbsp; &nbsp;//only loop for more than one row&nbsp; &nbsp; &nbsp; for(var&nbsp; i = 0; i<list.lenvth; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('title').innerHTML&nbsp; = list[i].title;&nbsp; &nbsp; &nbsp; &nbsp;}});

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将其显示在页面上