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 >'); 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 >用户：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 ><img src='/images/loading.gif' data-original="http://www.cnblogs.com//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 ><a href="http://www.cnblogs.com//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 >用户：账户飒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 >没有更多数据。</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 ><h2>出错啦！</h2><p>原因：未登录</p></div>') 79         }; 80         if (data.error_code == 156003) { 81           $('.coupon').html('<div ><h2>出错啦！</h2><p>原因：权限不足~请补充</p></div>') 82         }; 83         if (data.error_code == 156007) { 84           $('.coupon').html('<div ><h2>出错啦！</h2><p>原因：服务异常</p></div>') 85         }; 86         if (data.error_code == 511) { 87           $('.coupon').html('<div ><h2>出错啦！</h2><p>原因：账号未开通直达号</p></div>') 88         }; 89         if (data.error_code == 520) { 90           $('.coupon').html('<div ><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 })

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

原标题：ajax 无刷新下拉加载更多。

关键词：ajax