jQuery+AJAX实现无刷新下拉加载更多
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了jQuery+AJAX实现无刷新下拉加载更多的相关资料,需要的朋友可以参考下
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互。
js code
$(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', suess: function (data) { if (data.error_code === 0) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div class="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><span class="hx-user">用户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 class="load"><img src="/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', suess: function (data) { if (data.error_code === 0) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div class="consume-whole"><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 class="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('<div class="no-data">没有更多数据。</div>'); $(window).unbind('scroll'); }; ajax_getting = false; } }); }; $(".load").remove(); }, 200); }); if (data.error_code == 156006) { $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因未登录</p></div>') }; if (data.error_code == 156003) { $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因权限不足~请补充</p></div>') }; if (data.error_code == 156007) { $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因服务异常</p></div>') }; if (data.error_code == 511) { $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因账号未开通直达号</p></div>') }; if (data.error_code == 520) { $('.coupon').html('<div class="stays"><span></span><p>暂无核销记录</p></div>') } }, error: function (data) { } }) $(window).bind("orientationchange", function() { $('.sliders').css('left',$(window).width() / 2 +'px'); }) })
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇:移动端JQ插件hammer使用详解
下一篇:Javascript实现字数统计
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程