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

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

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注