ajax 无刷新下拉加载更多。

随着互联网时代的发展，web前端已经和后台数据挂钩，作为web前端仅仅不是只切图写写html，css  和简单js交互。

 

js  code

 

  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 })

View Code

 

推荐个前端群：群名称：html5/css3/js/jq/nodejs/div 群号：339840649  欢迎加入 一起交流。

转载于:https://www.cnblogs.com/Sunshine-boy/p/4617080.html