Web app ------ 从Servlet读取Json数据并显示,生成历史数据曲线图

Posted -XZY

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web app ------ 从Servlet读取Json数据并显示,生成历史数据曲线图相关的知识,希望对你有一定的参考价值。

1、我的Servlet端

创建Servlet;

导入需要的jar包;

接收到客户端的请求;

数据类;

从数据库的读取数据并存入链表;

转成Json格式返回给客户端;

(1)创建Servlet

img

参考:https://www.cnblogs.com/alsf/p/9180976.html

(2)导入需要的jar包

 

 

下载网址:http://www.java2s.com/Code/Jar/j/Catalogj.htm

(3)接收到客户端的请求

String sID = request.getParameter("sID");//sID

对应的客户端请求代码:$.ajax({...data:"sID="+sID,...});

(4)数据类

package pro8;
​
public class Temp_Data {
private String sDateTime;
private float sValue;
public Temp_Data() {}

    public Temp_Data(String time, float value) {
        sDateTime=time;
        sValue=value;
    }
​
    public void setTime(String time) {
        sDateTime=time;
​
    }
​
    public void setValue(float value) {
        sValue=value;
​
    }
​
    public String getTime() {
        return sDateTime;
​
    }
​
    public float getValue() {
        return sValue;
​
    }
}

(5)从数据库的读取数据并存入链表

参考的是菜鸟教程的代码:https://www.runoob.com/servlet/servlet-database-access.html

包括:①数据库加载驱动②数据库连接③数据库查询④返回结果并存入链表

 

public class Hello extends HttpServlet {
// JDBC 驱动名及数据库 URL
    static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";  
    static final String DB_URL = "jdbc:mysql://localhost:3306/project1";
    
    // 数据库的用户名与密码,需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "123456"; 
    public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        Connection conn = null;
        java.sql.Statement stmt = null;
        /*...接收到客户端的请求...*/
        try{
            /*①数据库加载驱动*/
                // 注册 JDBC 驱动器
                Class.forName(JDBC_DRIVER);            
                /*②数据库连接*/
                conn = DriverManager.getConnection(DB_URL,USER,PASS);
                /*③数据库查询*/
                stmt = conn.createStatement();
                String sql;
                sql = "select sDateTime,sValue from table1 where sID = \'"+sID+"\'"+"ORDER BY sDateTime ASC";
                System.out.print(sID);
                ResultSet rs = stmt.executeQuery(sql);
                //这里是链表
                List<Temp_Data> templist=new ArrayList<Temp_Data>();
                /*④返回结果并存入链表*/
                while(rs.next()){
                    // 通过字段检索
                    String time = rs.getString("sDateTime");
                    float value = rs.getFloat("sValue");
                    Temp_Data temp=new Temp_Data(time,value);
                    templist.add(temp);
                }
                //out.print(sID);
 /*...转成Json格式返回给客户端...*/
                //System.out.println("array--->"+jarray);
                // 完成后关闭
                rs.close();
                stmt.close();
                conn.close();
            } catch(SQLException se) {
                // 处理 JDBC 错误
                se.printStackTrace();
            } catch(Exception e) {
                // 处理 Class.forName 错误
                e.printStackTrace();
            }finally{
                // 最后是用于关闭资源的块
                try{
                    if(stmt!=null)
                    stmt.close();
                }catch(SQLException se2){
                }
                try{
                    if(conn!=null)
                    conn.close();
                }catch(SQLException se){
                    se.printStackTrace();
                }
            }
        }
}
​

 

 

(6)转成Json格式返回给客户端

JSONArray jarray=JSONArray.fromObject(templist);
out.print(jarray);

2、客户端代码

(1)界面部分

<body>  
    <form action="" method="post" style="height: 92px; ">  
        <input type="text" name="sID" id="sID" value="s001">  
        <br><input type="button" name="btn" id="btn" value="提交" onClick="test();" style="height: 34px; ">  
    </form>  
​
   <p>在此处显示曲线图:</p>
<div id="curve" >
</div>
   <p>在此处显示历史数据:</p>
<div id="hisData" >
</div>
​
</body>
</html>

(2)简单的css样式

<style type="text/css">
#sID{
      border:1px solid #000;
      float:left;
      width: 200px;
      position: fixed;
}
#btn{
      font-size: 12px;
      color: #FFF;
      background-color: #F93;
      height: 20px;
      width: 150px;
      margin-top: 5px;
      margin-left: 20px;
      border-top-color: #F93;
      border-right-color: #F93;
  border-bottom-color: #F93;
      border-left-color: #F93;
}
p{
      font-size: 16px;
}
</style>

(3)发送请求给服务器

<!DOCTYPE HTML>
<html>
<head>
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>  
<script src="JS/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">  
    function test(){          
     var sID=document.getElementById("sID").value;
         $.ajax({   
                type:"POST",   
                url:"Hello", 
                data:"sID="+sID,
                dataType: \'json\',   
               success:function(msg){
                },
error:function(){
alert("error");
}
            });  
  }  
</script>  
</head>  

(4)解析返回的Json数据,并将Time和Value存入x,y数组

var temp=JSON.stringify(msg);
$("#hisData").html(temp);
var arr=JSON.parse(temp);
var x = [];
var y = [];
for (var i = 0; i < arr.length; i++) {
  x[i] = arr[i][\'time\'];
  y[i] = parseFloat(arr[i][\'value\']);
  console.log(y[i]);
}

(5)绘制曲线图

参考:https://www.highcharts.com.cn/demo/highcharts/spline-plot-bands

 

var chart = Highcharts.chart(\'curve\', {
chart: {
      type: \'spline\'//类型为曲线
},
title: {
      text: \'温度变化历史数据\'
},
subtitle: {
      text: \'传感器\'
},
xAxis: {
      categories: x//X轴数据
},
yAxis: {
  title: {
        text: \'温度 (℃)\'
      },
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null,
},
tooltip: {
      valueSuffix: \' ℃\'
},
plotOptions: {
      spline: {
        lineWidth: 4,
        states: {
      hover: {
        lineWidth: 5
      }
},
marker: {
      enabled: false
}
}
},
series: [{
      name: \'温度\',
      data: y//Y轴数据
}],
navigation: {
      menuItemStyle: {
      fontSize: \'10px\'
}
}
});

 

3、运行效果图

4、创建Servlet遇到的问题

(1)工作空间不能与发布目录相同,之前无意中改了工作目录,导致运行后文件丢时。

解决方法:修改工作空间

(2)出现404错误:路径错误

解决方法:检查路径,web.xml下的路径和url

(3)出现500错误:导入的包有问题

以上是关于Web app ------ 从Servlet读取Json数据并显示,生成历史数据曲线图的主要内容,如果未能解决你的问题,请参考以下文章

gwt- 如何读取文本文件(Google App Engine servlet)?

从 .NET 中的 app.config 或 web.config 读取设置

无法在Java Web应用程序中读取文件

如何从 servlet 获取给定 URL 的来源?

关于web项目web.xml配置文件路径的问题。

[Java.Web][Servlet]读取配置