关于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 ...
随机推荐
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
- [转]理解Linux系统中的load average
转自:http://heipark.iteye.com/blog/1340384 谢谢,写的非常好的文章. 一.什么是load average linux系统中的Load对当前CPU工作量的度量 (W ...
- 浏览器中跨域创建cookie的问题
当我们在www.a.com这个域下用ajax提交一个请求到www.b.com这个域的时候,默认情况下,浏览器是不允许的,因为违反了浏览器的同源策略.解决方案可以参考笔者的这篇博文:http://www ...
- 【转】Gvim开发环境配置笔记--Windows篇
配置文件(vimrc) set nocompatible set nu! set cursorline colorscheme murphy " vim 自身命令行模式智能补全 set wi ...
- Graph | Eulerian path
In graph theory, a Eulerian trail (or Eulerian path) is a trail in a graph which visits every edge e ...
- Json的语法及使用方法
Json的语法及使用方法 Json(JavaScript Object Notation)对象表示标识,是一种轻量级的数据交换语言,比XML更容易解析,独立于语言和平台. 语法规则: 对象用{}保存 ...
- Mongo中append方法使用
在MongoDB的官网已经很详细的介绍了各种客户端的使用,其中也包括java的,在此,仅对几个比较疑惑的地方做个标注: (1).如何向db中添加collection? 如果在api文档中找不到答案,那 ...
- Eclipse创建java web工程配置Tomacat和JDK 【转】
在学习AJAX过程中,还用Intellij就有点老旧了,这是后装个Eclipse时,发现这个配置也很头疼,现在就叫你如何创建一个web工程,同时叫你配置Eclipse. 一.创建一个web工程 1.打 ...
- 【五子棋AI循序渐进】——开局库
首先,对前面几篇当中未修复的BUG致歉,在使用代码时请万分小心…………尤其是前面关于VCF\VCT的一些代码和思考,有一些错误.虽然现在基本都修正了,但是我的程序还没有经过非常大量的对局,在这之前,不 ...
- JS 的trim()
去除字符串左右两端的空格,在vbscript里 可 用 trim.ltrim 或 rtrim,但 js 却没有这 3个 内置方法,需 手工编写.下面的实现方法 用到 正则表达式,效率不错, 把 三 ...