117笔记问答要实现点击加载更多，可以使用Ajax来向后端发起请求获取更多的数据，然后将数据添加到页面中。
以下是一个简单的示例：
HTML部分：
第一条内容
第二条内容
第三条内容
JavaScript部分：
// 获取加载更多按钮和内容容器
var loadMoreBtn = document.getElementById('load-more');
var contentContainer = document.getElementById('content');
// 定义每次加载的数量和初始偏移量
var batchSize = 3;
var offset = 3;
// 点击加载更多按钮时触发的函数
loadMoreBtn.addEventListener('click', function() {
// 发起Ajax请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-api-url?offset=' + offset + '&limit=' + batchSize, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功时将获取到的数据添加到内容容器中
var newContent = JSON.parse(xhr.responseText);
newContent.forEach(function(item) {
var p = document.createElement('p');
p.textContent = item;
contentContainer.appendChild(p);
});
// 更新偏移量
offset += batchSize;
}
};
xhr.send();
});
在上述示例中，首先通过getElementById方法获取加载更多按钮和内容容器。然后定义了每次加载的数量和初始偏移量。在点击加载更多按钮时，使用XMLHttpRequest对象发起Ajax请求，并将偏移量和加载数量作为参数传递给后端API。当请求成功时，将获取到的数据解析后添加到内容容器中，然后更新偏移量。
需要注意的是，上述示例中的Ajax请求使用了GET方法，你需要根据你的实际情况选择合适的请求方法和参数传递方式。