AJAX - 将异步请求渲染到 DOM答案

【问题标题】：AJAX - Render Async Request to DOMAJAX - 将异步请求渲染到 DOM
【发布时间】：2018-08-31 05:18:36
【问题描述】：

我正在使用 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

等等。

【问题讨论】：

标签： json ajax for-loop

【解决方案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)
}

【讨论】：

【解决方案2】：

您需要更新您的风味数组以保存下一个元素切片。您可以将一个 from 参数传递给您的方法并将其设置为从切片到您想要的下一个元素数量的起点。

【讨论】：