AJAX的加载更多功能不会使旧数据倍增,可以通过以下代码示例来实现:
HTML代码:
数据1
数据2
数据3
JavaScript代码:
// 初始数据
var data = ['数据4', '数据5', '数据6'];
// 加载更多数据的函数
function loadMoreData() {
// 获取当前已加载的数据数量
var currentDataLength = document.getElementsByClassName('data-item').length;
// 模拟异步加载更多数据
setTimeout(function() {
// 加载新的数据
var newData = data.slice(currentDataLength, currentDataLength + 3);
// 将新数据添加到页面中
var dataContainer = document.getElementById('data-container');
newData.forEach(function(item) {
var newItem = document.createElement('div');
newItem.classList.add('data-item');
newItem.textContent = item;
dataContainer.appendChild(newItem);
});
}, 1000);
}
// 绑定加载更多按钮的点击事件
var loadMoreBtn = document.getElementById('load-more-btn');
loadMoreBtn.addEventListener('click', loadMoreData);
上述代码演示了一个简单的加载更多功能,初始加载了3条数据,点击"加载更多"按钮后,异步加载了3条新的数据,并将新数据添加到页面中,旧数据不会倍增。
下一篇:Ajax的加载器?