首頁猿問 api請求后如何顯示結果？(js)

api請求后如何顯示結果？(js)

JavaScript

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

});

反對回復 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 關注
281 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

api請求后如何顯示結果？(js)

api請求后如何顯示結果？(js)

3 回答

添加回答

api請求后如何顯示結果？(js)