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伪实时动态下拉显示最新数据的更多相关文章

  1. DataGridView单元格内容自动匹配下拉显示

    页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...

  2. (转)如何获得当前ListVIew包括下拉的所有数据?

    ListView listView = activity.getListView();获取的仅仅是当前屏幕显示的list,但是具有下拉信息,不在当前屏幕,但是下拉显示的数据无法或得到.谁知道如何获得当 ...

  3. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  4. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. 用Ajax遍历三级下拉框

    用Ajax遍历三级下拉框 //通过一级分类的id查二级分类(记得在前端网页按钮绑定点击事件) function getSecondCategory(oneCategoryId){ alert(&quo ...

  7. ajax实时获取下拉数据

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...

  8. iscroll5 上拉,下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  9. iscroll5 版本下的 上拉,下拉 加载数据

    上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...

随机推荐

  1. 用外部表的方式查询当天数据库alert日志文件

    1环境准备 2查询ORA-开头的错误

  2. DBConfigReader.java

    package com.vcredit.ddcash.batch.util; import java.sql.Connection;import java.sql.PreparedStatement; ...

  3. BizTalk动手实验(三)BizTalk开发综合实验

    1 课程简介 通过本课程熟悉BizTalk开发组件Schema/Map/Orchestration/Pipeline的开发与配置 2 准备工作 3 演示 3.1 创建与配置BizTalk应用程序 1. ...

  4. Android课程---Activity中保存和恢复用户状态

    onSaveInstanceState 保存 在暂停之后和保存之前调用 onRestoreInstanceState 恢复 再启动之后和显示之前调用 package com.example.chens ...

  5. Java 正则表达式[转载]

    PS:转载自CSDN博客看上去很美 众所周知,在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂,如果用纯编码方式解决,往往会浪费程序员的时间及精力.因此,学 ...

  6. 连连看bug记录

    1.bug统计 bug1: bug现象:消除两个相同图案之间的连线跨越了其他图片. 期待现象:应该改成绕过图案呈折线形. 二者差异:折现有没有穿过其他图片. bug原因猜测:小组能力原因. 复现步骤或 ...

  7. oslo.messaging 1.8.0 bug fix and blueprint

    1366597 由于amqp_auto_delete可配置,但是NotifierPublisher使用的是没有在配置中获取而使用的默认的False,即非auo_delete,因而在用户配置了amqp_ ...

  8. centos 6.7下 elasticsearch的安装

    1.下载elasticsearch的安装包,用ftp上传到linux系统下目录中,如在当前用户root的目录下新建目录elasticsearch,放入安装包 不要忘了添加执行权限 chmod +x * ...

  9. websocket 403

  10. WIN2008 R2 安装SQLSERVER2008笔记

    系统升级到SERVER2008R2 有些地方和WIN2003区别很大 这里记下 1.IIS 2008已经自带了不需要再额外找安装包或者系统盘安装 只需要打开服务管理器“角色”中添加”“web服务器(I ...