从列表中值绑定到一个变量来进行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;
        });
    }
}

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

}