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

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

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將其顯示在頁面上
添加回答
舉報