加载更多

原创于 2018-01-19 16:57:18 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和JavaScript实现的点击按钮加载更多内容的功能。通过监听按钮点击事件，发送异步请求获取数据，并将数据追加到指定的HTML元素中。当数据加载完毕后，会更新按钮文字提示。

关于点击加载更多

html页面

$(function () {
var p = 1;
var html= "";
$("#btn-more").click(function () {
var self = $(this);
var loading = layer.open({type: 2,content: '加载中'});
$(this).attr("disabled","disabled");
p++;console.log(p);
$.post("{:url('baodanlist')}",{p:p},function (res) {
console.log(res);
layer.close(loading);
if(res.code){
res.data.forEach(function (item) {
html +=`<div class="flexcenter ptb10 borderb">
<div class="flex-item">
<div class="font16">
<span style="color:red">${item.status}</span>
</div>
<div class="texthidden">报单金额：￥${item.money}</div>
</div>
<div class="font12 text-muted text-right">时间：${item.create_time}</div>
</div>`;
});
console.log(html);
$("#box").html("");
$("#box").append(html);
self.removeAttr("disabled");
}else{
self.text("—— 数据加载完毕 ——");
}
});
});
});