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

最新推荐文章于 2024-05-23 10:17:58 发布

sunshine_hl

最新推荐文章于 2024-05-23 10:17:58 发布

阅读量2.1w

点赞数 2

分类专栏： web前端文章标签： ajax javascript

本文链接：https://blog.csdn.net/sunshine_hl/article/details/50496783

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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");
        }