博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax 无刷新下拉加载更多。
阅读量:7074 次
发布时间:2019-06-28

本文共 5407 字,大约阅读时间需要 18 分钟。

随着互联网时代的发展,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('
'); 17 arrText.push('

' + t.title + '

'); 18 if (t.coupon_type == 1 ) { 19 arrText.push('

金额:¥' + t.amount + '

'); 20 } else { 21 arrText.push('

优惠:' + t.amount + '

'); 22 } 23 arrText.push('

用户:s账户飒飒是是是啊啊12' + t.user_name +'' + '核销时间:' + t.use_time + '

'); 24 arrText.push('
'); 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('
'); 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('
'); 62 } 63 discount.append(arrText.join('')); 64 $(".load").remove(); 65 } else { 66 $(".load").remove(); 67 discount.append('
没有更多数据。
'); 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('

出错啦!

原因:未登录

') 79 }; 80 if (data.error_code == 156003) { 81 $('.coupon').html('

出错啦!

原因:权限不足~请补充

') 82 }; 83 if (data.error_code == 156007) { 84 $('.coupon').html('

出错啦!

原因:服务异常

') 85 }; 86 if (data.error_code == 511) { 87 $('.coupon').html('

出错啦!

原因:账号未开通直达号

') 88 }; 89 if (data.error_code == 520) { 90 $('.coupon').html('

暂无核销记录

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

你可能感兴趣的文章
×××服务让用户看得见
查看>>
Ceisum官方教程2 -- 项目实例(workshop)
查看>>
局部堆栈给变量分配内存是以16B为基数的
查看>>
web前端性能优化指南
查看>>
NEC Topaz电话交换机简单管理
查看>>
深度剖析:远程控制软件如何实现隐性监控
查看>>
如何用C++ 写Python模块扩展(一)
查看>>
[20170705]diff比较执行结果的内容.txt
查看>>
Ajax
查看>>
VS2010安装与启动
查看>>
linux 压缩解压缩命令
查看>>
BZOJ1820:[JSOI2010]Express Service 快递服务(DP)
查看>>
MapReduce数据筛选
查看>>
Laravel 建站随笔
查看>>
Cesium入门6 - Adding Imagery - 添加图层
查看>>
将打开的网页以html格式下载到本地
查看>>
Spring Boot:快速入门(二)
查看>>
Spring思维导图(AOP篇)
查看>>
消息中间件的应用——谈谈秒杀(转)
查看>>
使用SQL Server Management Studio 创建数据库备份作业
查看>>