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

 更新时间:2015年07月03日 10:36:15   投稿:hebedich  
这篇文章主要介绍了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',
    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');
  })
})

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

相关文章

  • jQuery实现切换页面布局使用介绍

    jQuery实现切换页面布局使用介绍

    在很多网站尤其在一些购物网站上,展示商品的列表页提供了许多商品,用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中,将给您讲述如何实现这种效果
    2011-10-10
  • 7个jQuery最佳实践

    7个jQuery最佳实践

    这篇文章主要为大家分享了7个jQuery最佳实践,在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery之简单的表单验证实例

    jQuery之简单的表单验证实例

    下面小编就为大家带来一篇jQuery之简单的表单验证实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jQuery中的siblings()是什么意思(推荐)

    jQuery中的siblings()是什么意思(推荐)

    siblings()方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思,今天小编给大家介绍下
    2016-12-12
  • jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

    本篇文章主要介绍了jquery Easyui Datagrid实现批量操作(编辑,删除,添加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jquery 鼠标滑动显示详情应用示例

    jquery 鼠标滑动显示详情应用示例

    本文示例要为大家实现的效果是鼠标滑动,显示详情,代码很简洁,很适合学习
    2014-01-01
  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    这篇文章主要介绍了jquery实现可自动判断位置的弹出层效果代码,可实现根据鼠标位置进行合理的判断并显示弹出层的功能,涉及jQuery鼠标事件及页面元素位置属性的相关判定技巧,需要的朋友可以参考下
    2015-10-10
  • jquery $(this).attr $(this).val方法使用介绍

    jquery $(this).attr $(this).val方法使用介绍

    $(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法,本文整理了一些相关的示例,感兴趣的朋友可以参考下
    2013-10-10
  • jQuery获取checkboxlist的value值的方法

    jQuery获取checkboxlist的value值的方法

    最近着手一个项目用到了服务器空间checkboxlist ,使用起来是方便,可以想要从js获取值就稍微麻烦点了,google后找到了如下方法,感兴趣的小伙伴们可以参考一下
    2015-09-09
  • jQuery实现鼠标移到某个对象时弹出显示层功能

    jQuery实现鼠标移到某个对象时弹出显示层功能

    这篇文章主要介绍了jQuery实现鼠标移到某个对象时弹出显示层功能,涉及jQuery基于事件响应动态操作页面元素属性相关实现技巧,需要的朋友可以参考下
    2018-08-08

最新评论