echarts經過ajax向服務器發送post請求,servlet從數據庫讀取數據並返回前端

時間 2019-11-16

標籤 echarts 經過 ajax 服務器發送 post 請求 servlet 數據庫讀取數據返回前端欄目 Ajax 简体版

原文原文鏈接

1.echarts的官網上的demo，都是直接寫死的隨機數據，沒有和數據庫的交互，因此就本身寫了一下，ok，咱們開始一步一步走一遍整個流程吧。javascript

就以官網最簡單的那個小demo來作修改吧。官網上的小demo的效果圖以下：（很熟悉，有沒有）html

2.按照echarts的使用方法新建一個echarts.html文件。爲ECharts準備一個具有大小（寬高）的Dom(講的有點細，熟悉的朋友直接跳過)java

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

新建<script>標籤引入符合AMD規範的加載器，如esl.js，引入jquery爲等一下AJAX發送POST請求作準備jquery

 <script src="echarts/esl.js"></script>
 <script src="echarts/jquery.min.js"></script>

路徑配置web

 // 路徑配置
 require.config({
            paths:{ 
                'echarts' : 'echarts/echarts',
                'echarts/chart/bar' : 'echarts/echarts'
            }
 });

最後是使用：如下代碼是官網上的，紅色部分的data數據等一下咱們修改一下從數據庫中去讀取ajax

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );

整個前段頁面的代碼以下：主要就是修改了option中的xAxis的data和series中的data,這2個data在官網的demo中都是直接寫死的,這裏咱們採用AJAX發送post請求sql

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 來自百度CDN -->
    <script src="echarts/esl.js"></script>
    <script src="echarts/jquery.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths:{ 
                'echarts' : 'echarts/echarts',
                'echarts/chart/bar' : 'echarts/echarts'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            drewEcharts
        );
         function drewEcharts(ec) {
                
                console.log("1");
                // 基於準備好的dom，初始化echarts圖表
                myChart = ec.init(document.getElementById('main')); 
                console.log("2");
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            
                        }
                    ]
                };
                //加載數據
                loadDATA(option);
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            
        }
        function loadDATA(option){
            $.ajax({
               type : "post",
               async : false, //同步執行
               url : "bar.do",
               data : {},
               dataType : "json", //返回數據形式爲json
               success : function(result) {
                          if (result) {
                                 //初始化option.xAxis[0]中的data
                                  option.xAxis[0].data=[];
                                  for(var i=0;i<result.length;i++){
                                    option.xAxis[0].data.push(result[i].name);
                                  }
                                  //初始化option.series[0]中的data
                                  option.series[0].data=[];
                                  for(var i=0;i<result.length;i++){
                                    option.series[0].data.push(result[i].num);
                                  }
                           }
                        }
            });       
       }
    </script>
</body>

3.在前一步中AJAX的POST請求的路徑是 url : "bar.do" 在web.xml中配置如下映射以下圖：
數據庫

  <servlet>
    <servlet-name>helloBar</servlet-name>
    <servlet-class>com.helloBar</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>helloBar</servlet-name>
  <url-pattern>/bar.do</url-pattern>
  </servlet-mapping>

這樣，經過bar.do就會找到com這個包下面的helloBar這個servlet.這個servlet的主要做用是向數據庫讀取數據並返回給前段頁面，這裏我用的是局部數據源去連接，關於局部數據源怎麼連這裏我就不講述了，不會的同窗能夠在個人博客中找到。固然也可使用最基本的JDBC去鏈接。json

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //建立了一個bardao的對象，barDAO主要是對數據庫的鏈接和對數據庫的操做
        barDAO bardao=new barDAO();
        //調用bardao的select_all()方法把從數據庫中讀取全部的數據返回的是一個ArrayList，ArrayList裏面放的是一個barBean
        ArrayList<barBean> array = bardao.select_all();
        //設置返回時的編碼格式
        response.setContentType("text/html; charset=utf-8");
       //調用JSONArray.fromObject方法把array中的對象轉化爲JSON格式的數組
        JSONArray json=JSONArray.fromObject(array);
        System.out.println(json.toString());
        //返回給前段頁面
        PrintWriter out = response.getWriter();  
        out.println(json);  
        out.flush();  
        out.close();   
}

數據庫的bar表格式以下圖：數組

barBean的代碼：

import java.io.Serializable;
import java.sql.Date;
public class barBean {
    private String name;
    private int num;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    
}

barDAO的代碼：

public class barDAO {
        private static InitialContext context = null;
        private DataSource dataSource = null;
        private static final String SELECT_ALL = "SELECT*FROM bar ";
        public barDAO(){
            try{
                if(context == null){
                    context = new InitialContext();
                }
                dataSource = (DataSource)context.lookup("java:comp/env/jdbc/sampleDS");
            }catch(NamingException e2){
                
            }
        }
        public Connection getConnection(){
            Connection conn = null;
            try{
                conn = dataSource.getConnection();
            }catch(SQLException e){}
            return conn;
        }  
        public ArrayList<barBean> select_all()
        {
             Connection conn = null;
             PreparedStatement pstmt = null;
             ResultSet rst = null;
            try{
                conn = dataSource.getConnection();
                pstmt = conn.prepareStatement(SELECT_ALL);

                rst = pstmt.executeQuery();
                ArrayList<barBean> array = new ArrayList<barBean>();
                while(rst.next())
                {
                    barBean bar = new barBean();
                    bar.setName(rst.getString("name"));
                    bar.setNum(rst.getInt("num"));
                    array.add(bar);
                }
                pstmt.close();
                rst.close();
                return array;
            }catch(SQLException e){
                System.out.println("Error occured at barDAO->select_all()");
                return new ArrayList<barBean>();
            }finally{
                try{
                    conn.close();
                }catch(SQLException e){
                    System.out.println("Error occured at closing connection in barDAO");
                }
            }
        }

}