定时刷新table获取数据

    这是第一篇博客,从这里开始,我将记录我遇到的各种编程问题,大大小小,以此慢慢记录。   

    前两天,一同事需要我帮忙写一段小代码,前端界面用velocity模板处理,通过ajax调用后端接口,重点是要10秒进行一次刷新,界面显示的是table列表。不难,要么就是直接用velocity模板语言循环遍历对象获取数据,js写一个10定时器刷新界面,但是这样一来要刷新整个浏览器,体验不好也不太符合需求;或许有更好的方法,但这里采取的是另一种方法,直接通过js方法写一个定时器,定时器调用ajax的异步方法,再把数据加载到界面上。

    先写一个题外话,velocity模板语言循环遍历对象获取数据代码:


        
        
        
        
        
        
    
        #foreach($l in $list)
            
                
                
                
                
                
                
            
        #end
    
事件编号事件类型应答码事件状态请求时间应答时间
$l.get("evenId")$l.get("evenType")$l.get("resoCd")$l.get("evenSt")$l.get("reqTs")$l.get.("respTs")

接下来是我解决这次问题的方法,vm部分:


        
        
        
        
        
        
    
事件编号事件类型应答码事件状态请求时间应答时间

ajax部分:

$(function(){
    test();
    setInterval(test, 10000);                //循环执行,定时10秒
    function test(){
        $.ajax({
            type: 'GET',
            url: 'getStatus'                    //请求地址
            //data: {carno:'1009'},             //请求参数
            dataType: 'json',
            success: function(data){
                console.info(data);
                var testTbody = $("#test");
                testTbody.empty();          //若不做清空处理,列表则会重复叠加
                if(data){
                    $.each(data, function(i, list){
                        var test = "" + 
                                        "" + list.evenId + "" +
                                        "" + list.evenType + "" +
                                        "" + list.resoCd + "" +
                                        "" + list.evenSt + "" +
                                        "" + list.reqTs + "" +
                                        "" + list.respTs + "" +
                                    "";
                         testTbody.append(test);
                     });
                }
            }
        });
    }
});

controller参考模板(返回是json字符串即可):

定时刷新table获取数据_第1张图片

效果图(每隔10秒会刷新table列表):

关于js的定时器的tips(主要有2个方法):

1、setInterval(方法,周期)----根据指定的周期循环的调用该方法,只有当清除定时器(即clearInterval())的方法出现时,该定时器才会被消除;

2、setTimeout(方法,执行定时器前等待的毫秒数)-----在指定毫秒数过后就执行定时器。

 

你可能感兴趣的:(ajax)