javascript - 将列表中的值绑定到变量以进行 api 查询

Question

有一个带有随机笑话的按钮，根据类别显示笑话。通过API请求获取类别列表https://api.chucknorris.io/jokes/categories

笑话输出在https://api.chucknorris.io/jokes/random?category={category}

问题：如何{category}根据下面的代码在点击分类时获取具体名称（点击分类时，页面不应该更新）？

function foo() {
    let xhr = new XMLHttpRequest();

    xhr.open('GET', 'https://api.chucknorris.io/jokes/categories', false);

    xhr.send();

    if (xhr.status !== 200) {
        console.log(xhr.status + ` ` + xhr.statusText);
    }

    let dataObject = JSON.parse(xhr.responseText);
    console.log(dataObject);
    let menu = document.getElementById('menu');
    dataObject.forEach(item => {
        let div = document.createElement("div");
        div.innerHTML = "<a href='" + item + "'>" + item + "</a>";
        div.classList.add("div-added");
        div.id = 'items';
        menu.append(div);
    });
    let currentCategory;
    let items = document.querySelectorAll("#items");
    for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function(e) {
            e.preventDefault();
            console.log(items[i]);
            return false;
        });
    }
}

标签： javascripthtmlapi

Answer 1

函数 foo() {

let dataObject = getRemoteData('https://api.chucknorris.io/jokes/categories');
console.log(dataObject);

let menu = document.getElementById('menu');
dataObject.forEach(item => {
    let div = document.createElement("div");
    div.innerHTML = "<a href='javascript:void(0)' onclick=getJoke('" + item + "')>" + item + "</a>";
    div.classList.add("div-added");
    div.id = 'items';
    menu.append(div);
});

}

函数getJoke（令牌）{

let jokeData = getRemoteData("https://api.chucknorris.io/jokes/random?category=" + token);

// Write code to use that joke data     
console.log(jokeData);

}

函数 getRemoteData(url) {

let xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send();

if (xhr.status !== 200) {
    console.log(xhr.status + ` ` + xhr.statusText);
}

return JSON.parse(xhr.responseText);

}