ajax点击加载更多

ajax实现点击加载更多效果逻辑还是相对比较简单，点击按钮累加分页数据即可。

一、说明

首先，通过后端程序猿欧巴提供的接口，我们分别返回2个参数，list即数据列表内容，allnum即数据列表总数。然后，请求参数分别是count（页码）、num（数量）、type（文章类型，分别提供了参数1、2、3）

二、技术栈

jquery+es6

三、关于参数

我们约定一次请求5条数据、每点击按钮（加载更多）显示5条，即var num = 5。在这里注意一点，分页是从0开始的，即var count = 0。至于文章类型，我们随便写个参数var type = 2。

四、默认加载

首次默认加载5条数据，分页从0开始。这里，需要注意一点，就是判断当数据加载完成后及时让点击按钮的文字变成“没有更多数据”（否则需要点击一次按钮才能出现，降低了用户体验）。因此在首次加载完数据后，需要定义一个全局变量var isNum，然后获取服务器列表总数量，然后在点击更多按钮里进行if判断即可。

$(function(){
  var num =
  $.ajax({
        url:'xxx',  //接口就不暴露了
        type:'get',
        data:{num:num,count:count,type:type},
        dataType: 'jsonp',
        beforeSend:function(){
            $('.getMore').html("加载中~"); 
        },
        success:function (data){
            // console.log(data.list);
            $('.getMore').html("加载更多"); 
            //当没有数据时list返回的是null
            if(data.list == null){
                $('.getMore').html("暂无更多数据");
                $('.getMore').attr('disabled',true);
                return false;
            };
            //等数据加载成功后 如果列表数据总数量小于请求数量
            // alert(data.allnum);
            if(data.allnum <= num){
                $('.getMore').html("暂无更多数据");
                $('.getMore').attr('disabled',true);
            };
            //下面是es6写法 非常方便
            var html = '';
            for(let i = 0;i < data.list.length; i++){
                html += `
                <div class="message">
                <div class="message-header"><img src="${data.list[i].pic}" alt="" width="23" height="23">
                ${data.list[i].username}<span class="date">${data.list[i].time}</span></div>
                <div class="message-content">
                    <a href="${data.list[i].id}">
                        <p>${data.list[i].article}</p>
                    </a>
                </div>
                <div class="message-footer">
                    <p><span>${data.list[i].comment}评论</span>·<span>${data.list[i].type}</span></p>
                </div>
            </div>
                `
            };
            $('.main').append(html);
            //默认加载完数据后 然后获取到服务器的数据总量
            isNum=data.allnum;
        },error: function() {
            $('.getMore').html("数据获取失败");
        }
  })
})

五、点击加载更多

累加分页即可 count++;

$('.getMore').click(function (){
  //累加分页 
   count++;
   $.ajax({
    //复制上面即可
    //上面说过，这里是用来判断数据加载完了
    if((isNum - (count+1)*num) <= 0){
         $('.getMore').html("暂无更多数据");
         $('.getMore').attr('disabled',true);
    };
  })
})