异步刷新动态获取数据

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

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);
    }
    });
}

成功之后直接返回html代码,展示转换过的数据。为做到自动的时时刷新,js写一个定时函数:<body οnlοad="setInterval('page_click()',3000)">,前端jsp页面基本完成。

看servlet的实现。

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

{.......

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

...........

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

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

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

此案例是一个简单的异步刷新案例,希望对初学者有所帮助。

 

 

 

 

 

 

 

 

 

 

 

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤从数据库获取数据并实现异步刷新显示饼状图: 1. 首先,确保你已经安装了FastAdmin和相关依赖。可以使用Composer来安装FastAdmin和必要的扩展。 2. 创建一个数据库表,用于存储饼状图数据。表结构可以包含字段如下: - id:饼状图数据的唯一标识 - label:数据项的标签 - value:数据项的值 3. 在FastAdmin中创建一个控制器,用于处理异步请求并获取数据库中的饼状图数据。你可以在控制器中使用Model来查询数据库并获取数据。例如,使用ThinkPHP框架的话,可以这样写: ```php use think\Controller; use app\admin\model\PieData; class PieController extends Controller { public function getData() { $data = PieData::select(); return json($data); } } ``` 4. 在前端页面中使用Ajax来发送异步请求并获取饼状图数据。你可以在页面中使用JavaScript来实现这个功能。例如,使用jQuery的话,可以这样写: ```javascript $.ajax({ url: '/admin/pie/getData', type: 'GET', dataType: 'json', success: function(data) { // 在这里使用返回的数据来绘制饼状图 // 例如使用Chart.js等图表库 } }); ``` 5. 在页面中使用图表库来绘制饼状图。你可以选择使用一些流行的JavaScript图表库,如Chart.js、Highcharts等。根据你选择的库,按照其文档提供的方法来绘制饼状图,并将异步获取到的数据传递给图表库进行展示。 这样,你就可以通过以上步骤从数据库获取数据并实现异步刷新显示饼状图了。记得在控制器中处理数据查询和前端页面中处理异步请求和绘制图表的逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值