Java Web数据可视化（三）通过Ajax异步刷新页面，获取后台servlet数据并通过echarts在前台可视化

通过jdbc访问数据库获取数据才上一篇博客中已经完成啦：https://blog.csdn.net/weixin_43422355/article/details/83348750

这次的工作主要分为三个方面：

• 在JSP页面中定义按钮，通过点击按钮调用havaChoose()方法

• 在JS页面中通过Ajax访问servlet，实现异步刷新，并将数据通过echarts的可视化

• 在servlet中将数据转换成Json格式

1.在JSP页面中定义按钮
在jsp页面中定义点击按钮调用havechoose()方法

<a onclick="havechoose()" style="font-size: 12px;" class="button button-rounded button-tiny">
<span>查询</span>
</a>

这里用的是bootstrap框架实现的按钮

class = “button button-rounded button-tiny”

2.在JS页面中通过Ajax访问servlet
通过post方法请求servlet并可视化数据

//echarts部分设置
var option = {
    tooltip : {
        show : false
    },
    title: {
        text: '机器1历史功率'
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        left: 'center',
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: [{
        startValue: '2018-08-07 09:43:33.0'
    }, {
        type: 'inside'
    }],
    /*-----------------------*/
    visualMap: {
        top: 10,
        right: 10,
        pieces: [{
            gt: 0,
            lte: 100,
            color: '#096'
        }, {
            gt: 100,
            lte: 200,
            color: '#ffde33'
        }, {
            gt: 200,
            lte: 300,
            color: '#ff9933'
        }, {
            gt: 300,
            lte: 400,
            color: '#cc0033'
        }, {
            gt: 400,
            lte: 500,
            color: '#660099'
        }, {
            gt: 500,
            color: '#7e0023'
        }],
        outOfRange: {
            color: '#999'
        }
    },
    legend : {
        data : [ '消耗功率' ]
    },
    xAxis : [ {
        type : 'category'
    } ],
    yAxis : [ {
        type : 'value'
    } ],
    series : [ {
        name : '功率',
        type : 'line'
    } ]
};
//读取数据并可视化
function havechoose(){
    /*document.write("<div id=\"myDiv\" style=\"height: 400px;weight: 200px;\"></div>");*/
    /*document.write("<div id='myDiv'style='height: 4000px;weight: 2000px;'></div>");*/
    var startDate = document.getElementById("startDate").value;
    var endDate = document.getElementById("endDate").value;
    var machineNumber = document.getElementById("machineNumber").value;
    $.ajax({
        type : 'post',	//传输类型
        async : false,	//同步执行
        url : '/logic/historyMachine',	//web.xml中注册的Servlet的url-pattern
        data : {"startDate":startDate, "endDate":endDate, "machineNumber":machineNumber},
        dataType : 'json', //返回数据形式为json
        success : function(result) {
            if (result) {
                console.log(result);
                //初始化xAxis[0]的data
                option.xAxis[0].data = [];
                for (var i=0; i<result.length; i++) {
                    option.xAxis[0].data.push(result[i].time);
                }
                //初始化series[0]的data
                option.series[0].data = [];
                for (var i=0; i<result.length; i++) {
                    option.series[0].data.push( parseInt(result[i].power));
                }
            }
        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    });//AJAX
    var myChart = echarts.init(document.getElementById('myDiv'));
    myChart.showLoading();

    //加载数据到option
    //loadData(option);
    //设置option
    myChart.hideLoading();
    myChart.setOption(option);
}

这里需要注意servlet的配置，确保url地址不出错
确保JS页面中的url:中填写的是url-pattern中的路径

  <servlet>
        <servlet-name>historyMachine</servlet-name>
        <servlet-class>logic.historyMachine</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>historyMachine</servlet-name>
        <url-pattern>/logic/historyMachine</url-pattern>
    </servlet-mapping>

3.在servlet中将数据转换成Json格式
这里用到json格式转换的包
https://download.csdn.net/download/weixin_43422355/10828075

首先通过jdbc从数据库中获取数据：

       ArrayList<Data> result = null;
        jdbc DataBase = null;
        try {
            DataBase = new jdbc();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        String sql = "select * from testtable2t";
        try {
            result = DataBase.getData(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        System.out.println(result);

在通过包中的方法将ArrayList转换为jason格式并想页面输出

JSONArray data = JSONArray.fromObject(result);
        System.out.println(data.toString());

        PrintWriter out = response.getWriter();
        out.println(data);
        out.flush();
        out.close();