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. python 数据类型基础

    Python3 运算符 什么是运算符? 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. 1.算术运 ...

  2. angular.js学习笔记之一

    angular也是一个MVC框架,其中M即model模型表示服务器,V即view视图代表html代码,C即control控制器用来处理用户交互的部分.

  3. 手机自带的显示基站命令(android手机定位,iphone基站定位)

    手机自带的显示基站命令(安卓手机定位,苹果手机基站定位) 分类: 通信和网络2012-02-07 17:48 1734人阅读 评论(0) 收藏 举报 手机htciphone中兴三星网络 安卓手机自带快 ...

  4. java基础比较好的笔记总结

    http://wenku.baidu.com/link?url=02LPBvoYztYSd_htlE4wqzJPsA3pu8yKhIZ9yUiyvh0GT-S9D8TCXZ4flsaewkmnN9AY ...

  5. Web前端开发基础 第四课(CSS元素模型)

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  6. css中width的计算方式,以及width:100%的参考系

    PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertic ...

  7. swift流行UI库(github)

    http://www.cocoachina.com/ios/20161109/18007.html

  8. Visual C++ 中的重大更改

    https://technet.microsoft.com/zh-cn/learning/bb531344.aspx   当你升级到 Visual C++ 编译器的新版本后,可能会在之前编译并正常运行 ...

  9. 一些小题<代码>

    1.用传统方法计算一个数的二进制 1.只能计算小于2**16的数字 i = 17 num_2 = int(input("输入一个数字:").strip()) while True: ...

  10. 协程并发框架gevent及其用法

    gevent是python的一个并发框架,采用协程实现并发目的,用起来也非常简单 gevent的docs:http://www.gevent.org/contents.html 一个最简单的例子: i ...