JSON数据传输和接收 绘制曲线图 JDBC数据库查询
目录
编写JSON传输数据类
首先对于数据类型采用String类型来记录datetime，采用float类型来存储value。
构造方法，其中get方法和set方法要对应方法名，否则java源码会报错。
net.sf.json.JSONObject defaultBeanProcessing
信息: Property 'xxx' of class servlet.dataInfo has no read method. SKIPPED 类似这样
package servlet;
public class dataInfo {
public String dateTime;
public float value;
public String getDateTime() {
return dateTime;
}
public float getValue() {
return value;
}
public dataInfo() {
}
public dataInfo(String dateTime,float value) {
this.setDateTime(dateTime);
this.setValue(value);
}
public void setDateTime(String dateTime) {
this.dateTime=dateTime;
}
public void setValue(float value) {
this.value=value;
}
}实现java后端的JDBC数据库连接和查询
首先需要在项目中导入mysql的jar包，获取方式可以在本地服务器的根目录下进行搜索即可。
然后再右键项目-->构建路径-->配置构建路径-->添加外部jar包 即可。
以下是数据库的连接和查询。
Connection con;//数据库连接
String driver = "com.mysql.jdbc.Driver";//驱动
String url = "jdbc:mysql://localhost:3306/project1?useUnicode=true&characterEncoding=utf-8&useSSL=false";
String user = "root";//数据库用户名
String password = "admin";//数据库密码
try {
Class.forName(driver);
con = DriverManager.getConnection(url,user,password);
if(!con.isClosed())
System.out.println("Succeeded connecting to the Database!");
Statement statement = con.createStatement();
String sql = "此处插入SQL-Query语句";
ResultSet rs = statement.executeQuery(sql);
while(rs.next()) {
//数据库查询内容读入
}
rs.close();
con.close();//关闭连接
}catch(ClassNotFoundException e) { //异常处理
System.out.println("Sorry,can`t find the Driver!");
e.printStackTrace();
} catch(SQLException e) {
//数据库连接失败异常处理
e.printStackTrace();
}catch (Exception e) {
e.printStackTrace();
}finally{
System.out.println("数据库数据成功获取！！");
}封装需要传输的JSON数据并传输
在获取数据库数据的时候，应该采用getTimetamp方法获取数据，否则可能只会获得单纯的日期或者时间数据。
值得注意的一点是：在list封装数据时，需要用SimpleDateFormat把日期时间格式化，将其转化为字符串类型的格式，否则日期时间格式松散化。
比如下面这样：
最后采用JSONArray.formObject把List里的数据转化为JSON数据，最后out.print到前端index.jsp页面。
Date time = null;
float value;
List<dataInfo> list=new ArrayList<dataInfo>();
while(rs.next()) {
time = rs.getTimestamp("sDateTime");
value = rs.getFloat("sValue");
SimpleDateFormat formattime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String pubtime=formattime.format(time);
dataInfo dataInfo=new dataInfo(pubtime,value);
list.add(dataInfo);
}
JSONArray ja=JSONArray.fromObject(list);
out.print(ja);
System.out.println("array--->"+ja);在前端把接收到的JSON转化为二维数组
由于绘制曲线图的函数所需要的data数据是一个二维数组，此时需要编写一个函数对接收到的JSON数据进行处理。
function formatDoubleDimensional(arr){
for (var i=0; i<arr.length; i++) {
var tmpArr = []
for (var attr in arr[i]) {
tmpArr.push(arr[i][attr])
}
arr[i] = tmpArr
}
return arr
};//通过arr.length获取JSON数据的长度，再按列读入各个元组的数据。这样在ajax的函数中就可以直接调用该函数来对msg进行二维数组转换，获取到绘制曲线图所需要的二维数组。
绘制曲线图 输出所查询的数据
首先应该导入绘制曲线图所需要的jquery文件
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/drawcharts.js" type="text/javascript"></script>然后是给出html格式定义,在主体部分添加一个盒子，用于显示绘制的曲线图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>温度传感器监控系统</title>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
</head>
<body>
<div id="curve">
</div>
</body>
</html>在ajax的success:函数中进行曲线函数的调用，当正确接收到数据后，才调用函数进行绘制曲线。
console.log(msg);//控制台输出数据
formatDoubleDimensional(msg);//把JSon转换为二维数组
showChart('#curve','spline','',false,msg);//绘制曲线最终结果
祝看到这里的你万事都如意~
对这个项目开发所需要的所有的JQuery文件我都放在了资源链接里，不需要积分，有需要的朋友自取。谢谢你的点赞~！