JSON数据传输和接收 绘制曲线图 JDBC数据库查询 java jsp

JSON数据传输和接收 绘制曲线图 JDBC数据库查询

目录

 

编写JSON传输数据类

实现java后端的JDBC数据库连接和查询

封装需要传输的JSON数据并传输

在前端把接收到的JSON转化为二维数组

绘制曲线图 输出所查询的数据

最终结果

祝看到这里的你万事都如意~

---

编写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 list=new ArrayList();
			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

这样在ajax的函数中就可以直接调用该函数来对msg进行二维数组转换，获取到绘制曲线图所需要的二维数组。

绘制曲线图 输出所查询的数据

首先应该导入绘制曲线图所需要的jquery文件

然后是给出html格式定义,在主体部分添加一个盒子，用于显示绘制的曲线图。

在ajax的success:函数中进行曲线函数的调用，当正确接收到数据后，才调用函数进行绘制曲线。

                  console.log(msg);//控制台输出数据
                  formatDoubleDimensional(msg);//把JSon转换为二维数组
            	  showChart('#curve','spline','',false,msg);//绘制曲线

最终结果

这里我们可以看到在控制台输出的是日期时间格式而不是时间戳格式，这就会影响到绘制图表的时候x轴不能显示时间的问题。

这里我们在后端进行解决，把我们之前转换好的日期时间格式转化成时间戳格式，此时的时间戳是字符串，在前端我们应该把它转换为整型格式。

String subtime=String.valueOf(formattime.parse(pubtime).getTime());

                for(i in msg){
                	  var m=msg[i];
                	  msg[i].dateTime=parseInt(m.dateTime);           
                  }

此时就完成了时间戳的转换，再次放进去绘制曲线函数就能得到相应的效果了。

这是前端数据发送部分的内容，第二个链接是APP打包的内容。

https://blog.csdn.net/weixin_44165203/article/details/106447038

https://blog.csdn.net/weixin_44165203/article/details/106595332

祝看到这里的你万事都如意~

对这个项目开发所需要的所有的JQuery文件我都放在了资源链接里，不需要积分，有需要的朋友自取。谢谢你的点赞~！