Ajax怎么实现点击不断加载数据列表-创新互联
这篇文章主要介绍“Ajax怎么实现点击不断加载数据列表”,在日常操作中,相信很多人在Ajax怎么实现点击不断加载数据列表问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ajax怎么实现点击不断加载数据列表”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司是专业的北川羌族网站建设公司,北川羌族接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行北川羌族网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!Ajax简介
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 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:
- 每日分配收益
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 += '
'+date+'
'; htmltxt += ''+data.list[i].profit+'%
'; 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); });到此,关于“Ajax怎么实现点击不断加载数据列表”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
文章标题:Ajax怎么实现点击不断加载数据列表-创新互联
网页URL:http://pwwzsj.com/article/hpjdo.html