php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下
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 += '
';
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);
});
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)相关推荐
- php ajax sucess 失败,Ajax请求发送成功但不进success的解决方法(图文教程)
下面我就为大家分享一篇Ajax请求发送成功但不进success的解决方法,具有很好的参考价值,希望对大家有所帮助. 1.情况描述:ajax发送成功,后台也成功响应请求,并返回了json数据,通过chr ...
- vue如何输出一个值_如何利用vue获取当前点击的元素并传值(图文教程) -
thinkphp开发的一个项目,登录成功后又跳转到登录页面,在提交信息后输出session都是正常的,没有问题,但是页面跳转后,session出现丢失现象,无法正常完成登陆.通过查找资料,发现原来是b ...
- linux 脚本 列表,shell -脚本 给出多个数据列表 执行任务
方法1: #!/bin/bash USER=`cat iplist.txt` PASS=`cat passwd.txt` echo $USER SSH() { while true do x=$1;s ...
- html中searchbutton点击没有反应,点击按钮加载完整的HTML后,使用Selenium加载其他元素...
我想刮一页并收集所有链接.该页面显示30个条目并查看完整列表,点击全部加载按钮是必要的.点击按钮加载完整的HTML后,使用Selenium加载其他元素 我使用下面的代码: from selenium ...
- 记——通过点击表头弹出筛选选项列表,点击进行数据筛选
要求 a.点击表头弹出列表 b.点击筛选内容进行数据筛选 c.允许多条件 d.当点击筛选选项列表之外的区域时,列表收起 e.筛选选项列表宽度与列宽度保持一致 f.筛选选项列表需要有横向滚动条 实现 a ...
- jap页面使用ajax动态加载列表数据,JSF - 使用AJAX调用基于DataTable中的mimetype值加载不同形式...
对于我的一个项目,我需要根据DataTable组件中可用的mimetype值加载不同的表单.我有标题,内容 - 中间的DataTable和页脚中的数据显示.单击DataTable条目应根据mimety ...
- php ajax 上拉显示更多,PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
- 区块链商品溯源系统左侧导航栏+右侧加载页面ajax html
纯前端页面,项目应该部署到服务器上,ajax跨域问题得到解决,无聊的毕业前实习. 网页是参考网上的原型设计 效果: 代码: html <!DOCTYPE html> <html la ...
- php 实现自动加载更多,$.ajax+php实战教程之下拉时自动加载更多文章原理分析二...
摘要: 继上一篇<$.ajax+php实战教程之下拉时自动加载更多文章原理分析>文章进行进一步讲解,完善之前的代码及引入ajax和php相关内容...... 上次留下的问题不知道看官们有没 ...
最新文章
- shell脚本求和_【零基础学云计算】Shell编程之case语句与循环语句
- 初级JavaScript程序员的绝佳进阶书
- JavaScript操作数组
- 云上人替代方案训练代码
- 4.1 df命令 4.2 du命令 4.3/4.4 磁盘分区
- ORIG1和ORIG2的运用
- [云炬创业基础笔记]第七张创业资源测试11
- linux 写脚本登录ftp,Linux使用Shell脚本实现ftp的自动上传下载-Go语言中文社区
- 代码 控制unity 暂停 编辑器_Unity3D 报错解决方案及常用功能收集
- java过滤器放行_过滤器学习
- 英国电信云服务直连Salesforce
- oracle 谭岚_Hibernate实现Oracle BLOB的数据读写(2)
- android gridview 按钮事件处理,Android TV gridview 的按键事件响应巧变 事件分发机制...
- Ajax的JSP示例以及相关知识介绍,适合于入门者
- MFC窗口支持文件拖入
- Illustrator 教程,了解 AI 中的绘图工具
- 机器学习中梯度下降算法的实际应用和技巧/李文哲
- 动态lacp和静态lacp区别_3分钟弄懂LACP实现原理!
- Python爬虫实战之爬取链家广州房价_03存储
- CCF-CSP 新生必读
热门文章
- 【计算机网络复习 数据链路层】3.4.3 后退N帧协议(GBN)
- 计算机网络(十九)-IEEE802.11无线局域网
- 多商户商城源码_多商户小程序开发搭建?开达应用多商户入驻商城小程序制作教程...
- python列表应用案例-python列表使用实例
- Input type (torch.cuda.DoubleTensor) and weight type (torch.cuda.FloatTensor) should be the same
- np.random.choice用法
- MATLAB获得子图位置
- VMware14.1 Ubuntu16.04安装教程
- Opencv中Mat的data数据只定义为uchar*类型,
- leetcode-search-in-rotated-sorted-array