ajax实现下拉菜单无刷新加载更多

Posted 2020-08-15 张三的美丽家园

  1 $(function() {
  2   var page = 1;
  3   var discount = $(‘#discount‘);
  4   var innerHeight = window.innerHeight;
  5   var timer2 = null;
  6   $.ajax({
  7     url: ‘/lightapp/marketing/verify/apply/list?page=1‘,
  8     type: ‘GET‘,
  9     dataType: ‘json‘,
 10     timeout: ‘1000‘,
 11     cache: ‘false‘,
 12     success: function (data) {
 13         if (data.error_code === 0) {
 14           var arrText = [];
 15           for (var i = 0, t; t = data.list[i++];) {
 16             arrText.push(‘<div class="consume-whole">‘);
 17             arrText.push(‘<h3>‘ + t.title + ‘</h3>‘);
 18             if (t.coupon_type == 1 ) {
 19               arrText.push(‘<p>金额：￥‘ + t.amount + ‘</p>‘);
 20             } else {
 21               arrText.push(‘<p>优惠：‘ + t.amount + ‘</p>‘);
 22             }
 23             arrText.push(‘<p><span class="hx-user">用户：s账户飒飒是是是啊啊12‘ + t.user_name +‘</span>‘ + ‘<span>核销时间：‘ + t.use_time + ‘</span></p>‘);
 24             arrText.push(‘</div>‘);
 25           }
 26           discount.html(arrText.join(‘‘));
 27         };
 28         var ajax_getting = false;　
 29         $(window).scroll(function() {
 30           clearTimeout(timer2);
 31           timer2 = setTimeout(function() {
 32             var scrollTop = $(document.body).scrollTop();　　
 33             var scrollHeight = $(‘body‘).height();　　
 34             var windowHeight = innerHeight;
 35             var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight);
 36             if (scrollWhole < 100) {
 37               if (ajax_getting) {
 38                 return false;
 39               } else {
 40                 ajax_getting = true;
 41               }
 42               discount.append(‘<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>‘);
 43               $(‘html,body‘).scrollTop($(window).height() + $(document).height());
 44               page++;
 45               $.ajax({
 46                 url: ‘/lightapp/marketing/verify/apply/list?page=‘ + page,
 47                 type: ‘GET‘,
 48                 dataType: ‘json‘,
 49                 success: function (data) {
 50                   if (data.error_code === 0) {
 51                     var arrText = [];
 52                     for (var i = 0, t; t = data.list[i++];) {
 53                       arrText.push(‘<div class="consume-whole"><a href="/lightapp/marketing/verify/page/info?rule_id=‘ + t.rule_id + ‘&coupon_id=‘+ t.coupon_id +‘">‘);
 54                       arrText.push(‘<h3>‘ + t.title + ‘</h3>‘);
 55                       if (t.coupon_type == 1 ) {
 56                          arrText.push(‘<p>金额：￥‘ + t.amount + ‘</p>‘);
 57                       } else {
 58                         arrText.push(‘<p>优惠：‘ + t.amount + ‘</p>‘);
 59                       };
 60                       arrText.push(‘<p><span class="hx-user">用户：账户飒111111111‘ + t.user_name +‘</span>‘ + ‘<span>核销时间：‘ + t.use_time + ‘</span></p>‘);
 61                       arrText.push(‘</a></div>‘);
 62                     }
 63                     discount.append(arrText.join(‘‘));
 64                     $(".load").remove();
 65                   } else {
 66                     $(".load").remove();
 67                     discount.append(‘<div class="no-data">没有更多数据。</div>‘);
 68                     $(window).unbind(‘scroll‘);
 69                   };
 70                   ajax_getting = false;
 71                 }
 72               });　　
 73             };
 74             $(".load").remove();
 75           }, 200);
 76         });
 77         if (data.error_code == 156006) {
 78           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦！</h2><p>原因：未登录</p></div>‘)
 79         };
 80         if (data.error_code == 156003) {
 81           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦！</h2><p>原因：权限不足~请补充</p></div>‘)
 82         };
 83         if (data.error_code == 156007) {
 84           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦！</h2><p>原因：服务异常</p></div>‘)
 85         };
 86         if (data.error_code == 511) {
 87           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦！</h2><p>原因：账号未开通直达号</p></div>‘)
 88         };
 89         if (data.error_code == 520) {
 90           $(‘.coupon‘).html(‘<div class="stays"><span></span><p>暂无核销记录</p></div>‘)
 91         }
 92  
 93       },
 94       error: function (data) {
 95  
 96       }
 97   })
 98   $(window).bind("orientationchange", function() {
 99     $(‘.sliders‘).css(‘left‘,$(window).width() / 2 +‘px‘);
100   })
101 })