Question

我正在使用for循环迭代JSON对象并返回结果。单击按钮后，结果将显示在网页上。

使用slice方法，我可以限制结果，但是，随后的单击按钮会重新加载相同的五个条目，而不是列表中的下五个条目。

listOfFlavors = () => {
    axios.get(`http://strainapi.evanbusse.com/${strainAPI}/searchdata/flavors`)
        .then(function (response) {
            let flavors = response.data.slice(0, 5)
            for (let i = 0, len = flavors.length; i < len; i++) {
                let li = document.createElement('li')

                li.innerHTML = JSON.stringify(flavors[i])
                document.querySelector('.flavors-list').appendChild(li)


            }
            // handle success
            console.log(response.data.slice(0, 5));
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
}

if (getFlavors) {
    getFlavors.addEventListener('click', listOfFlavors)
}

如何创建一个异步请求，该请求将在每次点击时返回指定数量的结果？

例如

第一次点击-显示1-5

第二次点击–显示6-10

等

Answer 1

您可以更改服务器API，以便传递一个参数告诉它您要使用的位置，并且它仅返回5个结果，或者保留一个变量，告诉您要分割的当前值。

无论哪种方式，您都需要将值存储在比ajax调用更高的作用域中，然后在ajax完成时更新该值。

这是第二种方法的示例：

var sliceVals = [0, 5];

listOfFlavors = () => {
    axios.get(`http://strainapi.evanbusse.com/${strainAPI}/searchdata/flavors`)
        .then(function (response) {
//notice the use of variables in slice instead of fixed values
            let flavors = response.data.slice(sliceVals[0], sliceVals[1]);
            //now increment the values for next time
            sliceVals[0] += 5;
            sliceVals[1] += 5;

            for (let i = 0, len = flavors.length; i < len; i++) {
                let li = document.createElement('li')

                li.innerHTML = JSON.stringify(flavors[i])
                document.querySelector('.flavors-list').appendChild(li)


            }
            // handle success
            console.log(response.data.slice(0, 5));
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
}

if (getFlavors) {
    getFlavors.addEventListener('click', listOfFlavors)
}

Answer 2

您需要更新flavors数组以容纳下一个元素切片。您可以将from参数传递给您的方法，并将其设置为起点，以从您想要的下一个元素切片。

AJAX-将异步请求呈现给DOM

2 个答案: