异步刷新动态获取数据

时间 2019-12-04 标签异步刷新动态获取数据

近期在开发过程当中接到一个小任务，就是须要pc端须要动态获取SIS系统传过来的小指标参数，作到时时刷新的效果。说到时时刷新，第一时间你们都会想到ajax异步刷新，由于也确实没有什么比这实现起来更加简单的了。html

SIS系统自己就是指标多，数据抓取要求时时同步最新的数据库数据，并且要求要动态的获取指标名称展现，按照机组的分组动态的建立展现的表格（也就是有几个机组建立几个展现的table）。前端

要求明确，根据前端设计好的html页面，先转换成jsp页面。而后建立访问的servlet。jsp页面将动态表格的内容抽取出来拼接到servlet中，而jsp页面中只是一个简单的ajax请求，代码以下：function page_click(){
$.ajax({
type : "post",
url : "<%=request.getContextPath()%>/CdGetDtSisdatasServlet/?eventtype=sisDatas",
dataType:"html",
async: false,
data:{},
success : function(data,textStatus){
//alert("成功");
$("#menu").html(data);
},
error:function(data){
alert("出内部错:"+data);
}
});
}ajax

成功以后直接返回html代码，展现转换过的数据。为作到自动的时时刷新，js写一个定时函数：<body onload="setInterval('page_click()',3000)">，前端jsp页面基本完成。数据库

看servlet的实现。app

servlet中的实现也比较简单了。首先根据需求，将数据库中的字段动态的拼装，变成能够接收sis系统的合法字段，而后动态获取数据。接着根据机组号动态插叙数据，分别存放在一个hashmap集合中。而后动态封装建立表格的方法，部分代码块以下：异步

{.......jsp

htmldata.append("<td>"+v2+"</td>\r\n");
htmldata.append("<td>"+v3+"</td>\r\n");
htmldata.append("<td>"+v4+"</td>\r\n");
htmldata.append("<td>"+v5+"</td>\r\n");
htmldata.append("<td>"+v6+"</td>\r\n");
htmldata.append(" </tr>\r\n");
}
htmldata.append("</table>\r\n");
return htmldata.toString();
async

...........函数

这里经过一个StrinBuffer 来说html代码进行了简单的拼装，这样能最简单的实现动态的建立表格，最后再主方法中调用动态建立表格的方法，最后post

String htmltoString=htmldata.toString();
response.getWriter().write(htmltoString);
response.getWriter().flush();
return htmltoString;

这个小功能基本完成，最后附一张效果图。

此案例是一个简单的异步刷新案例，但愿对初学者有所帮助。