关于ajax伪实时动态下拉显示最新数据
var list= data.data.list; //list是ajax返回的数组Array
if ($("#li" + list[].Id).length>) {
return false;
}
//$("#learnList").remove();
//如果不存在li标签,则按照先到后添加,做到最先的在最顶部的位置。
if (!($("li").size() > )) {
for (var i = list.length - ; i >= ; i--) {
if (!($("#li" + list[i].Id).length > )) {
//如果原本不存在这个li,也就是说新增的学习情况
var li = "<li id='li" + list[i].Id + "'>" + list[i].UserName + "同学,在【" + new Date(parseInt(list[i].StudyTime.replace(/\D/igm, ""))).toLocaleString() + "】,学习" + list[i].SegmentName + "</li>";
$(li).prependTo($("#learnList")).slideDown();
}
else {
return false;
}
}
}
else {
for (var i = ; i < list.length; i++) {
//for (var i = list.length-1; i >=0; i--) {
if (!($("#li" + list[i].Id).length > )) {
//如果原本不存在这个li,也就是说新增的学习情况
var li = "<li id='li" + list[i].Id + "'>" + list[i].UserName + "同学,在【" + new Date(parseInt(list[i].StudyTime.replace(/\D/igm, ""))).toLocaleString() + "】,学习" + list[i].SegmentName + "</li>";
$(li).prependTo($("#learnList")).slideDown();
}
else {
return false;
}
}
}
比较重点是,(因为数据库是按照时间由近到远的顺序排列的,所以第一个是最近的数据)
1.shtml页面第一次加载数据的时候,应该使用倒序i--,使得最先取到的数据拼接得到的li最后prependTo到ul中(当然也可以使用i++,用appendTo也可以。)
2.再次ajax刷新的时候,就要用i++,prependTo到ul中(当然也可以使用i--,用prependTo也可以。continue的时候,i++,i--都无所谓,就是要prependTo)
总之,如果return false的情况下,只能1.2.两步反着写。如果改为continue,反着写理论上也有一点速度的优势,当然是忽略不计的。 优化上面的代码,利用continue。
for (var i = list.length - ; i >= ; i--) {
if (!($("#li" + list[i].Id).length > )) {
//如果原本不存在这个li,也就是说新增的学习情况
var li = "<li id='li" + list[i].Id + "'>" + list[i].UserName + "同学,在【" + new Date(parseInt(list[i].StudyTime.replace(/\D/igm, ""))).toLocaleString() + "】,学习" + list[i].SegmentName + "</li>";
$(li).prependTo($("#learnList")).slideDown(); }
else {
//return false;
continue; //这样做,是为了避免先取到的最老的数据,遇到“if (!($("#li" + list[i].Id).length > 0)”,直接return false中断了。
} }
3.判断标签和ID存不存在的不一样,一个是size(),一个是length 4.全部写在$(function(){ })里面,包括func和setinterval
完整代码
<script type="text/javascript">
$(function () {
var QueryData = function () {
$.ajax({
url: "/whoLearning.ashx?action=query",
type: "post",
dataType: "json",
success: function (data) {
if (data.status == "ok") {
var list= data.data.list;
if ($("#li" + list[].Id).length>) {
return false;
}//如果不存在li标签,则按照先到后添加,做到最先的在最顶部的位置。
for (var i = list.length - ; i >= ; i--) {
if (!($("#li" + list[i].Id).length > )) {
//如果原本不存在这个li,也就是说新增的学习情况
var li = "<li id='li" + list[i].Id + "'>" + list[i].UserName + "同学,在【" + new Date(parseInt(list[i].StudyTime.replace(/\D/igm, ""))).toLocaleString() + "】,学习" + list[i].SegmentName + "</li>";
$(li).prependTo($("#learnList")).slideDown(); }
else {
//return false;
continue;
}
} }
},
error: function () { } });
}
QueryData();
setInterval(QueryData, );
});
</script>
关于ajax伪实时动态下拉显示最新数据的更多相关文章
- DataGridView单元格内容自动匹配下拉显示
页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...
- (转)如何获得当前ListVIew包括下拉的所有数据?
ListView listView = activity.getListView();获取的仅仅是当前屏幕显示的list,但是具有下拉信息,不在当前屏幕,但是下拉显示的数据无法或得到.谁知道如何获得当 ...
- java简单的实现搜索框的下拉显示相关搜索功能
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- 用Ajax遍历三级下拉框
用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...
- ajax实时获取下拉数据
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- iscroll5 版本下的 上拉,下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...
随机推荐
- Java 异常讲解(转)
六种异常处理的陋习 你觉得自己是一个Java专家吗?是否肯定自己已经全面掌握了Java的异常处理机制?在下面这段代码中,你能够迅速找出异常处理的六个问题吗? 1 OutputStreamWrite ...
- GIT与SVN的区别
1.GIT是分布式的,SVN不是: 这是GIT和其它非分布式的版本控制系统,例如SVN,CVS等,最核心的区别.如果你能理解这个概念,那么你就已经上手一半了.需要做一点声明,GIT并不是目前第一个或唯 ...
- Chrome开发,debug的使用方法。
怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shif ...
- IP地址的分类与寻址
IP地址:有一种标识符,被TCP/IP协议簇的IP层用来标识 连接到因特网的设备.IP协议的第4版IPv4地址是32位地址,是连接地址,定义了每一个连接到因特网上的设备(可以认为是主机的别名),而不是 ...
- jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式
query 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou"); //为奇数行设 ...
- IOS第二天多线程-04简化单例模式
******HMSingleton-ARC.h // .h文件 #define HMSingletonH(name) + (instancetype)shared##name; // .m文件 #de ...
- IOS第18天(4,核心动画,时钟效果,定时器,图片旋转角度,CALayer 锚点,获取当前,小时,秒,分)
**** #import "HMViewController.h" // 每秒秒针转6度 #define perSecendA 6 // 每分钟分针转6度 #define perM ...
- 【iCore3 双核心板】例程十四:FATFS实验——文件操作
实验指导书及代码包下载: http://pan.baidu.com/s/1dEpechF iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- iOS 横竖屏切换(应对特殊需求)
iOS 中横竖屏切换的功能,在开发iOS app中总能遇到.以前看过几次,感觉简单,但是没有敲过代码实现,最近又碰到了,demo尝试了几种情况,这里就做下总结.注意 横屏两种情况是反的你知道吗? UI ...
- center的用法
(1)先 frame ,决定大小,也就是宽.高 (2)再center,决定位置, 需要注意的是,不能直接写center,需要通过CGPointMake(x,y)赋值