ajax 点击加载更多，出现后面的内容，一次加载十条内容

来源：互联网发布：锥螺纹自动编程软件编辑：程序博客网时间：2024/05/22 15:21

1.在html部分增加两句代码

<div id="more" data-status="1">                加载更多</div><input type="hidden" id="page" value="2">

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 = 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 +="<div>"+data[i].title+"</div>"+"<div>"+data[i].date+"</div>"            }            information.append(html);            $("#more").html("加载更多");            $("#more").attr("data-status","1");        }

0 5