为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

UYOU 2023-08-24 21:03:48
我正在尝试通过搜索实现良好读取 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 时代码混乱,非常感谢:)。
查看完整描述

3 回答

?
凤凰求蛊

TA贡献1825条经验 获得超4个赞

你几乎所有事情都做对了,但有一件小事。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">


查看完整回答
反对 回复 2023-08-24
?
叮当猫咪

TA贡献1776条经验 获得超12个赞

您可以尝试以这种方式使用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;

       }

});


查看完整回答
反对 回复 2023-08-24
?
郎朗坤

TA贡献1921条经验 获得超9个赞

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


查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 132 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信