第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

api請求后如何顯示結(jié)果?(js)

api請求后如何顯示結(jié)果?(js)

UYOU 2023-08-24 21:03:48
我正在嘗試通過搜索實現(xiàn)良好讀取 API,但我可以發(fā)出請求,但我不知道如何顯示它。我試圖找到教程,但沒有。編輯 - 讓它工作,謝謝大家 <3應(yīng)用程序.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條經(jīng)驗 獲得超4個贊

你幾乎所有事情都做對了,但有一件小事。json( )當您在 上使用該函數(shù)時Promise.prototype.then( )'s response,結(jié)果又是一個 Promise。這就是它的工作原理,因此您需要Promise.prototype.then( )在結(jié)果上再次使用該函數(shù)才能獲取實際數(shù)據(jù)。就像下面這樣:


    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));

});

這是一個顯示相同內(nèi)容的示例:


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條經(jīng)驗 獲得超12個贊

您可以嘗試以這種方式使用ajax,如果您沒有獲取單行,則需要循環(huán)數(shù)據(jù)


$.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條經(jīng)驗 獲得超9個贊

API 的響應(yīng)在response.json(). 因此,要檢查您是否獲得了所需的響應(yīng),您可以嘗試執(zhí)行此操作并檢查控制臺。


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))

})

一旦您確認這正是您所期望的,您的下一個目標就是在頁面上顯示數(shù)據(jù)。為此,請查看響應(yīng)的結(jié)構(gòu)并決定要顯示的內(nèi)容。然后,您可以使用函數(shù)生成所需的 HTML,然后將其作為子節(jié)點附加到頁面上的節(jié)點中。


您可以將所有內(nèi)容構(gòu)建為字符串,在需要的地方插入數(shù)據(jù),然后將容器節(jié)點設(shè)置.innerHTML為您構(gòu)建的字符串。


或者,您可以使用命令來創(chuàng)建所有節(jié)點,例如按照document.createElement("div")您想要的方式構(gòu)建節(jié)點并用于.appendChild將其顯示在頁面上


查看完整回答
反對 回復 2023-08-24
  • 3 回答
  • 0 關(guān)注
  • 252 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號