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. JS 比较日期相隔都少天&& 比较两个日期大小&&指定日期往前后推指定天数

    //这些天常接触到有关于js操作日期事 就小结了一下,希望对你有帮助 function conversionDate(a,b){ var start =a.split('-'); var end = ...

  2. Windows8.1自定义快捷方式添加到开始屏幕

    Windows8.1自定义快捷方式添加到开始屏幕 将快捷方式复制到如下路径,在开始屏幕的所有中找到对应快捷方式,右键选择添加到开始屏幕即可. C:\Users\%USERNAME%\AppData\R ...

  3. intellij idea 插件 ideaVim

    像Eclipse一样,idea这个公认最好的javaIDE也有Vim插件. 安装方法 File>Settings>Plugins>Install JetBrains plugin.. ...

  4. hdu Is It A Tree?

    判定给定的边序列是否过程一棵树.我用到的判定方法是:第一步:判定  边数是否等于顶点数-1  第二:判定是否只有一个根节点  .当然还要考虑是否为空树的情况. 但是代码交上去,好几遍都是Runtime ...

  5. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  6. 加盐加密salt

    加盐加密是一种对系统登录口令的加密方式,它实现的方式是将每一个口令同一个叫做”盐“(salt)的n位随机数相关联. 加盐加密是一种对系统登录口令的加密方式,它实现的方式是将每一个口令同一个叫做”盐“( ...

  7. 20145337《Java程序设计》第八周学习总结

    20145337<Java程序设计>第八周学习总结 教材学习内容总结 15.1日志 15.1.1日志API简介 使用日志的起点是logger类,logger实例的创建有许多要处理的要素,必 ...

  8. JS读写cookie以及中文乱码解决

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092489.html 转载请注明. Js获取所有的cookie信息: var cookiename = d ...

  9. BizTalk动手实验(十六)EDI-AS2解决文案开发配置

    1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...

  10. JS开发windows phone8.1系列之1

    http://msdn.microsoft.com/zh-cn/library/windows/apps/dn629638.aspx,要点: 1.了解项目结构:package.appxmanifest ...