ajax实现下拉菜单无刷新加载更多

  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 class="consume-whole">‘);
 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 class="hx-user">用户: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 class="load"><img src="/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 class="consume-whole"><a href="/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 class="hx-user">用户:账户飒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 class="no-data">没有更多数据。</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 class="error"><h2>出错啦!</h2><p>原因:未登录</p></div>‘)
 79         };
 80         if (data.error_code == 156003) {
 81           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦!</h2><p>原因:权限不足~请补充</p></div>‘)
 82         };
 83         if (data.error_code == 156007) {
 84           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦!</h2><p>原因:服务异常</p></div>‘)
 85         };
 86         if (data.error_code == 511) {
 87           $(‘.coupon‘).html(‘<div class="error"><h2>出错啦!</h2><p>原因:账号未开通直达号</p></div>‘)
 88         };
 89         if (data.error_code == 520) {
 90           $(‘.coupon‘).html(‘<div class="stays"><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 })
时间: 2024-11-03 21:24:51

ajax实现下拉菜单无刷新加载更多的相关文章

jQuery Ajax实现下拉框无刷新联动

HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); string areaId = ViewBag.areaId; DataRow drArea = areaDal.GetArea(areaId); string countyId = drArea == null ? "-1" : drArea["countyId"].ToSt

Android UI--自定义ListView(实现下拉刷新+加载更多)

http://blog.csdn.net/wwj_748/article/details/12512885 Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就是不健全的.因为小巫近期要开发新浪微博客户端,需要实现ListView的下拉刷新,所以就想把这个UI整合到项目当中去,这里只是一个demo,可以根据项目的需要进行修改. 就不要太在乎界面了哈:

emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加载成功- 准备文件 编辑模板 header.php 的 head 添加必要文件: jquery-1.11.1.min.js:百度网盘下载 jquery.pjax-1.8.2.min.js:百度网盘下载 下载到模板的 scripts 目录下后将下面两句添加到</head>所有script标签的最前面

Android Demo 下拉刷新+加载更多+滑动删除

小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第一时间掌握最新消息,加载更多是什么nie,简单来说就是在网页上逛淘宝的时候,我们可以点击下一页来满足我们更多的需求,但是在手机端就不一样了,没有上下页,怎么办nie,方法总比困难多,细心的小伙伴可能会发现,在手机端中,有加载更多来满足我们的要求,其实加载更多也是分页的一种体现.小伙伴在使用手机版QQ

iOS:详解MJRefresh刷新加载更多数据的第三方库

原文链接:http://www.ios122.com/2015/08/mjrefresh/ 简介 MJRefresh这个第三方库是李明杰老师的杰作,这个框架帮助我们程序员减轻了超级多的麻烦,节约了开发时间,提高了开发效率.由于目前能力有限,尚不能自己写一套框架,所以就先膜拜和看明白大牛的框架了. 用于为应用添加常用的上拉加载更多与下拉刷新效果,适用 UIScrollView . UITableView . UICollectionView . UIWebView. gtihub上的地址:http

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样也会有一个问题----必须要知道每一条信息的具体高宽度 2.采用列布局,将每一条数据依次放置到每一列 其实两者的实现原理都是大同小异,现在我将针对第二种解决方案,用一个具体的事例来说明 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2

无刷新加载评论

服务器端 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <%@ WebHandler Language="C#" Class= "PostComment" %> using System; using System.Web; using System.Text; public class PostComment : IHttpHandler {         publ

jquery完成界面无刷新加载登陆注册

昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

thinkphp5.0调用ajax无刷新加载数据

控制器层那边就是调数据返回,这里不再赘述,视图层页面ajax部分写法如下 1 function shanchu(obj) 2 { 3 var code = $(obj).attr("code"); 4 5 $.ajax({ 6 url:"/index400/Test/sc", 7 data:{code:code}, 8 type:"POST", 9 dataType:"TEXT", 10 success: function(d