1.在html部分增加两句代码
加载更多2.js部分代码
$(function () {
$("#more").click(function () {
var page = parseInt($("#page").val());
$(this).html("加载中...");
status=$(this).attr("data-status");
if(status==1) {
status = $(this).attr("data-status", "0");
$.ajax({
type: "post",
url: "XXX",
data: "page=" + page,
dataType: "json",
success: function (data) {
data = https://www.it610.com/article/data.data;
/*数据不够10条隐藏按钮*/
if (data.length < 10) {
$(this).hide()
} else {
$("#page").val(page + 1);
//记录页码
}
insertDiv(data);
}
});
}});
});
function insertDiv(data){
var information = $(".information");
var html = '';
for (var i = 0;
i < data.length;
i++) {
html +=""+data[i].title+""+""+data[i].date+""
}
information.append(html);
$("#more").html("加载更多");
$("#more").attr("data-status","1");
}
【web前端|ajax 点击加载更多，出现后面的内容，一次加载十条内容】
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换