目录 首先对于数据类型采用String类型来记录datetime，采用float类型来存储value。 构造方法，其中get方法和set方法要对应方法名，否则java源码会报错。 net.sf.json.JSONObject defaultBeanProcessing 首先需要在项目中导入mysql的jar包，获取方式可以在本地服务器的根目录下进行搜索即可。 然后再右键项目–>构建路径–>配置构建路径–>添加外部jar包 即可。 以下是数据库的连接和查询。 在获取数据库数据的时候，应该采用getTimetamp方法获取数据，否则可能只会获得单纯的日期或者时间数据。 值得注意的一点是：在list封装数据时，需要用SimpleDateFormat把日期时间格式化，将其转化为字符串类型的格式，否则日期时间格式松散化。 比如下面这样： 最后采用JSONArray.formObject把List里的数据转化为JSON数据，最后out.print到前端index.jsp页面。 由于绘制曲线图的函数所需要的data数据是一个二维数组，此时需要编写一个函数对接收到的JSON数据进行处理。 这样在ajax的函数中就可以直接调用该函数来对msg进行二维数组转换，获取到绘制曲线图所需要的二维数组。 首先应该导入绘制曲线图所需要的jquery文件 然后是给出html格式定义,在主体部分添加一个盒子，用于显示绘制的曲线图。 在ajax的success:函数中进行曲线函数的调用，当正确接收到数据后，才调用函数进行绘制曲线。 对这个项目开发所需要的所有的JQuery文件我都放在了资源链接里，不需要积分，有需要的朋友自取。谢谢你的~！
JSON数据传输和接收 绘制曲线图 JDBC数据库查询
编写JSON传输数据类
信息: 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数据库连接和查询
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数据并传输
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转化为二维数组
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数据的长度，再按列读入各个元组的数据。绘制曲线图 输出所查询的数据
<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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="https://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>
console.log(msg);//控制台输出数据 formatDoubleDimensional(msg);//把JSon转换为二维数组 showChart('#curve','spline','',false,msg);//绘制曲线最终结果
祝看到这里的你万事都如意~
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
