ajax 點選載入更多,出現後面的內容,一次載入十條內容
阿新 • • 發佈:2019-01-27
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"); }