html点击加载下一页代码

在网页开发中，经常会涉及到展示大量数据的需求。为了方便用户浏览和提高网页性能，通常会采用点击加载下一页的方式。下面是实现该功能的代码示例：

script>
    var current_page = 1;
     // 当前页面数var total_page = 10;
 // 总页面数// 模拟请求数据并渲染function loadData() {
    // TODO: 发送ajax请求获取数据并渲染var data = ['数据1', '数据2', '数据3'];
    var html = '';
    for (var i = 0;
     i  data.length;
 i++) {
    html += 'div>
    ' + data[i] + '/div>
    ';
}
    document.getElementById('list').innerHTML += html;
}
// 绑定按钮点击事件document.getElementById('btn_load').addEventListener('click', function() {
if (current_page  total_page) {
    current_page++;
    loadData();
}
 else {
    alert('没有更多数据了！');
}
}
    );
    /script>
    

以上代码实现了点击按钮加载下一页数据的功能。首先定义了两个变量，其中current_page表示当前页数，total_page表示总页数。loadData函数模拟了请求数据的过程，并将数据渲染出来。当按钮被点击时，判断当前页数是否小于总页数，如果是则当前页数加一并调用loadData函数，否则提示没有更多数据了。

值得注意的是，在渲染数据时使用了innerHTML属性，这会导致之前的数据被覆盖，所以不能直接替换整个列表的HTML代码。而是将新的数据追加到列表的末尾，使用了字符串累加的方式来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！