zoukankan      html  css  js  c++  java
  • ajax点击不断加载数据列表

    实现每一种功能都有各种各样的方法和思路,今天总结我的一个小小的加载功能。

    加载很常见,每一位手机控都对她再熟不过了。每次我们在刷微博、朋友圈、空间······,滑到一定的量时,会提醒上滑加载更多,这是一种加载方式;还有一种就是点击加载,点击加载一定的量,再点击,再加载一定的量(说了一大堆废话)。

    现在我们就来说说ajax逐个加载数据,类似这样的数据列表。

    先是显示10个,然后点击加载更多,再显示10个·····

     一、思路

    一般使用ajax加载的话,一下会加载全部数据,这次要控制量的加载,那就要用到判断,判断加载到10个停止加载,后面通过点击按钮,在接着加载完的10个后面继续加载。

    要想控制只加载10个怎么办捏。不能通过遍历的 i 来判断 10个,因为加载完10个后后面还要加载,这样下一个10个就不好判断了,所以需要定义一个新的变量,来计算加载的个数,

    可以这样写:

    var ci = 0;

    for(var i = 0; i < data.list.length; i++){

      ci++;

      if(ci> 10){
      break;
      }

    }

    然后需要再加载10个,再调用这个方法,所以这个方法需要声明一个函数名,下次需要用的时候在调用,如果需要传参也可以。现在还有个问题,第一次进来加载完10个后,需要再加载前10个数据接着后面的json数据,怎么办呢???

    没关系,可以通过调用上面定义好的函数,然后传参。参数怎么计算呢???

    先想一个参数和什么有关系,和 i 有关系,i 和什么有关系呢?或者说什么可以影响 i 呢?

    好像只有它的值才会影响(那不是废话吗),这样的话它的值就不能是一个不变的数了,只能是一个变量,那么变量从哪里来呢???

    别忘了我们还有一个点击事件,先定义一个 点击次数 的变量  var clickNum = 0,因为每次加载时10个,所以 i 的值应该为:

    i = 10*clickNum,这是每次加载第一个数据的索引值。这样我们就解决了上面那个问题。

    此时还有问题要解决,当数据全部点击加载完后,点击按钮需要隐藏,那怎么计算数据加载完了呢???

    我们可以通过    点击的次数clickNum  来计算,因为每次加载10个,所以可以计算出一共需要加载的次数  parseInt((data.list.length)/10)+1,为什么加载的次数要加 1 呢?

    因为parseInt()是取整,比如21/10=2,但实际需要加载 3 次,所以要加 1 ,巧的是我们第一次加载不用点击,浏览器已加载进来就读取了10个数据,

    所以clickNum = parseInt((data.list.length)/10),当clickNum == parseInt((data.list.length)/10) 时隐藏点击按钮。

    思路基本清晰了

     

    二、实现功能

    HTML:

    <dl id="incomeNum">
      <dt><em></em>每日分配收益</dt>
    </dl>

    <div class="jiaZai_more">点击查看更多</div>

    css:

    此处省略css。

     

    js:

    function nwalletProfit(num, cNum){

    $.ajax({
    type: "post",
    async: true,
    url: url,
    dataType: "json",
    success: function (data) {
    if (data.list.length > 0){
    var i = num;
    var ci= 0;
    var x = parseInt((data.profit_list.length)/10);//x为每10个一组的组数

    if(cNum >= x){
    $(".jiaZai_more").hide(); //当点击更多的次数 ≥ 组数时,隐藏按钮
    }
    for(; i < data.profit_list.length; i++){
    var htmltxt = "";
    ci++;
    var date = data.profit_list[i].date;
    var year = date.substring(0, 4);
    var month = date.substring(4, 6);
    var day = date.substring(6);
    date = year+'年'+month+'月'+day+'日';
    htmltxt += '<dd>';
    htmltxt += '<h5 class="date">'+date+'</h5>';
    htmltxt += '<p class="income">'+data.list[i].profit+'%</p>';
    if(ci> 10){
    break;
    }
    $("#incomeNum").append(htmltxt);
    }

    }
    },
    error: function (e, d, c) {
    console.log(d)
    }
    });
    }
    nwalletProfit(0);
    var clickNum = 0; //点击的次数
    $(".jiaZai_more").on('click', function(event) {
    event.preventDefault();
    clickNum++;
    var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
    nwalletProfit(iNum, clickNum);
    });

    代码只供参考,此功能为作者原创,如有错误或者建议还望大神提出,共同进步!!

  • 相关阅读:
    《梦幻西游》打响反盗号战役:为2亿玩家提供360安全武器 狼人:
    瑞星发表官方声明:记者王学武系恶意诽谤 狼人:
    中美联合挫败Conficker蠕虫大攻击 狼人:
    安全机构建议奥巴马政府谨慎使用开源软件 狼人:
    大量计算机遭“灰鸽子”病毒攻击 狼人:
    警惕IE7新漏洞导致的木马病毒暴增 狼人:
    IE7漏洞被瞄准 新型攻击将爆发 狼人:
    Windows 7成为Pwn2own黑客挑战赛目标 狼人:
    黑客入侵唱片业协会网站 为“海盗湾”助威 狼人:
    “猫癣”“犇牛”木马病毒肆虐 专家提醒补漏洞 狼人:
  • 原文地址:https://www.cnblogs.com/chuanjian/p/5680215.html
Copyright © 2011-2022 走看看