【原创】ExtJs实现定时读取数据，动态加载数据，页面不刷新。Struts 2框架下JSON传值...

最新推荐文章于 2021-08-26 11:43:05 发布

最新推荐文章于 2021-08-26 11:43:05 发布 · 193 阅读

文章标签：

#json #java #数据库

本文介绍了一个基于ExtJS的养殖池实时数据监测系统的设计与实现。通过定时从数据库获取养殖池的各项指标数据，并以JSON格式返回，实现了每10秒自动更新页面上的养殖池状态，确保用户能实时查看到最新的数据。

这次的项目要求有一个养殖池的监测指标的动态展现，就是在系统的主页，展示出各个养殖池的实时动态数据。

数据由另外的一段程序，实时从硬件读取写进数据库，所以要做的就是定时去数据库去取数据就行了。

贴出来的代码，主要是实现的页面展示部分：

第一次载入页面后，养殖池读取一次数据，然后开始调用Ext.TaskMgr来实现动态的去发起请求

var task_CheckLoginState;//声明任务变量 task_RealTimeMointor = { run : RealTimeMointor,//执行任务时执行的函数 interval : 10000 //任务间隔，毫秒为单位，这里是10秒 } //Ext.TaskMgr.start(task_CheckLoginState);//初始化时就启动任务 //定时启动执行一次，启动TaskMgr， begin = setInterval("Ext.TaskMgr.start(task_RealTimeMointor)",5000);　　//1000毫秒=1秒 function stopMonitor() { Ext.TaskMgr.stop(task_RealTimeMointor); }

这就可以定时的调用RealTimeMointor函数去执行发起请求

这个函数的url是请求数据的地址，返回的是一个json格式的数据，如何做请参照我的另外一篇文章

如何生成树http://blog.youkuaiyun.com/peng_wu01/archive/2010/04/28/5538171.aspx；

struts.xml

<package name="edu.ldu.water.realtimemonitor.Action" extends="struts-default"> <action name="realtimemonitor_*" class="RealTimeMonitorAction" method="{1}"> <result name="showAllPool">/realtime/realtimepool.jsp</result> <result name="showAllPoolByAjax">/realtime/jsonaccepter.jsp</result> </action> </package>

一定要注意一点就是，一定要写个页面接一下你要取的数据，这样才能知道你要转哪个JSON。

/realtime/jsonaccepter.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <s:property value="poolDetailAjaxList"/>

Action的处理：

public String realtimeMonitorByWorkerShopId() { String s = this.findAllPoolByWorkerShopId(); //一定要转一下转成JSON数据类型 poolDetailAjaxList=JSONArray.fromObject(poolDetailList).toString(); //poolDetailAjaxList=JSONObject.fromObject(poolDetailList).toString(); poolDetailAjaxList=poolDetailAjaxList.substring(1, poolDetailAjaxList.length()-1); poolDetailAjaxList=poolDetailAjaxList.replace("/"", "'"); poolDetailAjaxList="{'info':["+poolDetailAjaxList+"]}"; System.out.println("JSON去掉引号后"+poolDetailAjaxList); ServletActionContext.getResponse().setContentType("text/json; charset=utf-8"); return "showAllPoolByAjax"; }

这里有个十分好玩的地方，就是JSONArray.fromObject()这个方法返回的JSON类型的key值是有双引号的，而回到页面的时候用

Ext.util.JSON.decode(response.responseText) 去操作的时候是不认双引号的，我纠结了老半天才发现问题出在这里，相当的让我窝火，NND。不得不暴一下粗口。还有JSONArray.fromObject()的返回是个数组类型，decode貌似只能转{}里的内容

顺便发一下我得到的JSON的格式，这里的格式和EXT.tree所需要的格式，有点区别的

JSON去掉引号后 {'info':[{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池1','poolId':1},{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池2','poolId':2},{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池3','poolId':3}]}

在回到页面，还是Ext.util.JSON.decode()的问题，他将一个json格式的东西给转换为一个对象类型，但是有一个地方需要注意，在

function RealTimeMointor() 里我注释掉的内容。

//Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap); 如果这样写的话

//Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap.水温); 会提示XX对象没有定义。后来我突然想明白了，monitorDetailInfoMap仍然被认为是一个对象，重新再decode一下就OK了，但是我没有做，因为monitorDetailInfoMap里的数据的个数是动态的，所以直接遍历会更合理一点

Ext.Ajax.request 返回数据成功后 success里有个方法，调用函数可以带两个个参数function(response, option)，那个response里有返回的数据，如何处理，请参看上面的代码。

还剩一个问题就是如何把数据塞到已经存在的DIV里，并且页面不刷新。ID.innerHTML=xx 可以解决这个问题。

function(response, option)里调用了insertIntoHtml方法来完成这个工作

function insertIntoHtml(collection) { for(var i = 0 ; i<collection.info.length; i++ ) { var s=""; s="时间"+collection.info[i].monitorTime+" <br /> 养殖池"+ collection.info[i].poolNo+"<br /> 详情："+allPrpos(collection.info[i].monitorDetailInfoMap)+"<br />"; //pool_i.innerHTML=s; //不能这么写，浏览器会认为pool_i没有定义 var divString = 'pool_'+i; document.getElementById(divString).innerHTML=s; } }

由于页面存在的DIV的ID也是动态生成的，所以取其ID的时候做了一点处理，上面的代码里有注释。

到这里基本也就完成了所有的动作，达到的效果就是每十秒钟页面就会向后台请求一次数据，而每个DIV里的数据在页面不刷新的前提下完成了数据的更新。

有些地方的思路可能过于僵硬，做的不好的地方请高手们指正。

有看不懂清楚的地方，请给我留言，必回复！