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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JavaScript实现无限轮播效果
Nov 19 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
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
Terran建筑一览
2020/03/14 星际争霸
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
javascript window对象属性整理
2009/10/24 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
python的文件操作方法汇总
2017/11/10 Python
Python continue继续循环用法总结
2018/06/10 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
flask框架中的cookie和session使用
2021/01/31 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
五年级语文教学反思
2014/01/30 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
铁路安全事故反思
2014/04/26 职场文书
电力培训心得体会
2014/09/02 职场文书
标枪加油稿
2015/07/22 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技