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


Posted in Javascript onJuly 03, 2015

随着互联网时代的发展,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',
    success: 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',
                success: 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');
  })
})

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
Javascript实现字数统计
Jul 03 #Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
JavaScript实现select添加option
Jul 03 #Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 #Javascript
Javascript中的作用域和上下文深入理解
Jul 03 #Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 #Javascript
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
基于python实现KNN分类算法
2020/04/23 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python基于socket函数实现端口扫描
2020/05/28 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python修改DBF文件指定列
2020/12/19 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
error和exception有什么区别
2012/10/02 面试题
写一个方法1000的阶乘
2012/11/21 面试题
小学六年级学生评语
2014/04/22 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书