AJax技术

jQuery+AJAX实现无刷新下拉加载更多

字号+ 作者:H5之家 来源:H5之家 2015-10-27 18:23 我要评论( )

$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({url: '/lightapp/marketing/verify/apply/listpage=1',type: 'GET',dataType: 'json',timeout: '1000',cache: 'false',suc

$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = 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) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div>'); 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><span>用户:s账户飒飒是是是啊啊12' + t.user_name +'</span>' + '<span>核销时间:' + t.use_time + '</span></p>'); arrText.push('</div>'); } discount.html(arrText.join('')); }; var ajax_getting = false;  $(window).scroll(function() { clearTimeout(timer2); timer2 = setTimeout(function() { var scrollTop = $(document.body).scrollTop();   var scrollHeight = $('body').height();   var windowHeight = innerHeight; var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight); if (scrollWhole < 100) { if (ajax_getting) { return false; } else { ajax_getting = true; } discount.append('<div><img src="/lightapp/static/zhida-yunying/img/load.gif" /></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) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div><a href="/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><span>用户:账户飒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('<div>没有更多数据。</div>'); $(window).unbind('scroll'); }; ajax_getting = false; } });   }; $(".load").remove(); }, 200); }); if (data.error_code == 156006) { $('.coupon').html('<div><h2>出错啦!</h2><p>原因:未登录</p></div>') }; if (data.error_code == 156003) { $('.coupon').html('<div><h2>出错啦!</h2><p>原因:权限不足~请补充</p></div>') }; if (data.error_code == 156007) { $('.coupon').html('<div><h2>出错啦!</h2><p>原因:服务异常</p></div>') }; if (data.error_code == 511) { $('.coupon').html('<div><h2>出错啦!</h2><p>原因:账号未开通直达号</p></div>') }; if (data.error_code == 520) { $('.coupon').html('<div><span></span><p>暂无核销记录</p></div>') } }, error: function (data) { } }) $(window).bind("orientationchange", function() { $('.sliders').css('left',$(window).width() / 2 +'px'); }) })

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • Ajax技术分类与实现教程及代码

    Ajax技术分类与实现教程及代码

    2016-01-18 14:17

  • ajax与php结合实现用户登录(详解)

    ajax与php结合实现用户登录(详解)

    2016-01-18 08:25

  • ASP NET 与 Ajax 的实现方式

    ASP NET 与 Ajax 的实现方式

    2016-01-17 19:01

网友点评
=