1. 程式人生 > >ajax 點選載入更多,出現後面的內容,一次載入十條內容

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