zoukankan      html  css  js  c++  java
  • 关于ajax伪实时动态下拉显示最新数据

     
    var list= data.data.list; //list是ajax返回的数组Array
    if ($("#li" + list[0].Id).length>0) { return false; } //$("#learnList").remove(); //如果不存在li标签,则按照先到后添加,做到最先的在最顶部的位置。 if (!($("li").size() > 17)) { for (var i = list.length - 1; i >= 0; i--) { if (!($("#li" + list[i].Id).length > 0)) { //如果原本不存在这个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 = 0; i < list.length; i++) { //for (var i = list.length-1; i >=0; i--) { if (!($("#li" + list[i].Id).length > 0)) { //如果原本不存在这个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 - 1; i >= 0; i--) {
                                    if (!($("#li" + list[i].Id).length > 0)) {
                                        //如果原本不存在这个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[0].Id).length>0) {
                                return false;
                            }//如果不存在li标签,则按照先到后添加,做到最先的在最顶部的位置。
                                for (var i = list.length - 1; i >= 0; i--) {
                                    if (!($("#li" + list[i].Id).length > 0)) {
                                        //如果原本不存在这个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, 10000);
        });
    </script>
  • 相关阅读:
    java 线程 Lock 锁使用Condition实现线程的等待(await)与通知(signal)
    A计划(三维dfs)
    最少拦截系统(线性dp)
    疯狂的采药(完全背包)
    Modular Inverse (拓展欧几里得求逆元)
    斐波那契数列的3种求法及几种素数筛法
    Magic Odd Square (思维+构造)
    Marlin (思维)
    qdu_组队训练(ABCFIJK)
    2018蓝桥编程题6-9+ 50%的10
  • 原文地址:https://www.cnblogs.com/John-Marnoon/p/5940827.html
Copyright © 2011-2022 走看看