html部分
<ul class="bill moreadd"> <div class="total"><span>-</span><span>23756.177</span></div> <li> <div class="left"> <p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p> </div> <div class="right">签到成功</div></li><li> <div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p> </div> <div class="right">签到成功</div></li><li><div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p></div><div class="right">签到成功</div> </li> <li> <div class="left"> <p class="type">0.01000</p> <p class="time">2019-06-14 15:58:59</p> </div> <div class="right">签到成功</div> </li> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class=“more” data-total=“3” data-page=“1”>加载更多</span>
$('.more').on('click', function () { var baseurl = $('#baseurl').val(); var type = $.trim($(this).attr('data-type')); var total = parseInt($(this).attr('data-total')); var page = parseInt($(this).attr('data-page')); $.ajax({ url: './lib/js/more' + page + '.json', type: 'get', dataType: "json", data: { page: page + 1 }, success: function (res) { var result = ''; // console.log(res.lists) var list = res.lists $('.more').attr('data-page', page + 1); for (var i = 1; i < list.length; i++) { console.log(res.lists[i]) result += '<li>' + '<div class="left">' + '<p class="type">' + res.lists[i].price + '</p>' + '<p class="time">' + res.lists[i].date + '</p>' + '</div>' + '<div class="right">' + res.lists[i].name + '</div>' + '</li>' } $('.moreadd').append(result); <span class="hljs-keyword">if</span> (page + <span class="hljs-number">1</span> == total) { $(<span class="hljs-string">'.more'</span>).remove(); } } }); });
注意
这里的more.json 是本地测试数据,所以传入页码是 more1.json more2.json 换成接口的话,按照正常来就可以了。