jQuery+AJAX实现无刷新下拉加载更多
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互。
js code
$(function(){ varpage=1; vardiscount=$('#discount'); varinnerHeight=window.innerHeight; vartimer2=null; $.ajax({ url:'/lightapp/marketing/verify/apply/list?page=1', type:'GET', dataType:'json', timeout:'1000', cache:'false', success:function(data){ if(data.error_code===0){ vararrText=[]; for(vari=0,t;t=data.list[i++];){ arrText.push('<divclass="consume-whole">'); arrText.push('<h3>'+t.title+'</h3>'); if(t.coupon_type==1){ arrText.push('<p>金额:¥'+t.amount+'</p>'); }else{ arrText.push('<p>优惠:'+t.amount+'</p>'); } arrText.push('<p><spanclass="hx-user">用户:s账户飒飒是是是啊啊12'+t.user_name+'</span>'+'<span>核销时间:'+t.use_time+'</span></p>'); arrText.push('</div>'); } discount.html(arrText.join('')); }; varajax_getting=false; $(window).scroll(function(){ clearTimeout(timer2); timer2=setTimeout(function(){ varscrollTop=$(document.body).scrollTop(); varscrollHeight=$('body').height(); varwindowHeight=innerHeight; varscrollWhole=Math.max(scrollHeight-scrollTop-windowHeight); if(scrollWhole<100){ if(ajax_getting){ returnfalse; }else{ ajax_getting=true; } discount.append('<divclass="load"><imgsrc="/lightapp/static/zhida-yunying/img/load.gif"width="6%"/></div>'); $('html,body').scrollTop($(window).height()+$(document).height()); page++; $.ajax({ url:'/lightapp/marketing/verify/apply/list?page='+page, type:'GET', dataType:'json', success:function(data){ if(data.error_code===0){ vararrText=[]; for(vari=0,t;t=data.list[i++];){ arrText.push('<divclass="consume-whole"><ahref="/lightapp/marketing/verify/page/info?rule_id='+t.rule_id+'&coupon_id='+t.coupon_id+'">'); arrText.push('<h3>'+t.title+'</h3>'); if(t.coupon_type==1){ arrText.push('<p>金额:¥'+t.amount+'</p>'); }else{ arrText.push('<p>优惠:'+t.amount+'</p>'); }; arrText.push('<p><spanclass="hx-user">用户:账户飒111111111'+t.user_name+'</span>'+'<span>核销时间:'+t.use_time+'</span></p>'); arrText.push('</a></div>'); } discount.append(arrText.join('')); $(".load").remove(); }else{ $(".load").remove(); discount.append('<divclass="no-data">没有更多数据。</div>'); $(window).unbind('scroll'); }; ajax_getting=false; } }); }; $(".load").remove(); },200); }); if(data.error_code==156006){ $('.coupon').html('<divclass="error"><h2>出错啦!</h2><p>原因:未登录</p></div>') }; if(data.error_code==156003){ $('.coupon').html('<divclass="error"><h2>出错啦!</h2><p>原因:权限不足~请补充</p></div>') }; if(data.error_code==156007){ $('.coupon').html('<divclass="error"><h2>出错啦!</h2><p>原因:服务异常</p></div>') }; if(data.error_code==511){ $('.coupon').html('<divclass="error"><h2>出错啦!</h2><p>原因:账号未开通直达号</p></div>') }; if(data.error_code==520){ $('.coupon').html('<divclass="stays"><span></span><p>暂无核销记录</p></div>') } }, error:function(data){ } }) $(window).bind("orientationchange",function(){ $('.sliders').css('left',$(window).width()/2+'px'); }) })
以上所述就是本文的全部内容了,希望大家能够喜欢。