1.echarts的官网上的demo，都是直接写死的随机数据，没有和数据库的交互，所以就自己写了一下，ok，我们开始一步一步走一遍整个流程吧。

就以官网最简单的那个小demo来做修改吧。官网上的小demo的效果图如下：（很熟悉，有没有）

2.按照echarts的使用方法新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom(讲的有点细，熟悉的朋友直接跳过)

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9. </body>

新建<script>标签引入符合AMD规范的加载器，如esl.js，引入jquery为等一下AJAX发送POST请求做准备

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

路径配置

  1.  // 路径配置
  2.  require.config({
  3.             paths:{
  4.                 'echarts' : 'echarts/echarts',
  5.                 'echarts/chart/bar' : 'echarts/echarts'
  6.             }
  7.  });

最后是使用：以下代码是官网上的，红色部分的data数据等一下我们修改一下从数据库中去读取

  1.         // 使用
  2.         require(
  3.             [
  4.                 'echarts',
  5.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  6.             ],
  7.             function (ec) {
  8.                 // 基于准备好的dom，初始化echarts图表
  9.                 var myChart = ec.init(document.getElementById('main')); 
  10.  
  11.                 var option = {
  12.                     tooltip: {
  13.                         show: true
  14.                     },
  15.                     legend: {
  16.                         data:['销量']
  17.                     },
  18.                     xAxis : [
  19.                         {
  20.                             type : 'category',
  21.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  22.                         }
  23.                     ],
  24.                     yAxis : [
  25.                         {
  26.                             type : 'value'
  27.                         }
  28.                     ],
  29.                     series : [
  30.                         {
  31.                             "name":"销量",
  32.                             "type":"bar",
  33.                             "data":[5, 20, 40, 10, 10, 20]
  34.                         }
  35.                     ]
  36.                 };
  37.  
  38.                 // 为echarts对象加载数据
  39.                 myChart.setOption(option);
  40.             }
  41.         );

整个前段页面的代码如下：主要就是修改了option中的xAxis的data和series中的data,这2个data在官网的demo中都是直接写死的,这里我们采用AJAX发送post请求

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5.     <!-- 来自百度CDN -->
  6.     <script src="echarts/esl.js"></script>
  7.     <script src="echarts/jquery.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="height:400px"></div>
  12.     <script type="text/javascript">
  13.         // 路径配置
  14.         require.config({
  15.             paths:{
  16.                 'echarts' : 'echarts/echarts',
  17.                 'echarts/chart/bar' : 'echarts/echarts'
  18.             }
  19.         });
  20.  
  21.         // 使用
  22.         require(
  23.             [
  24.                 'echarts',
  25.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
  26.             ],
  27.             drewEcharts
  28.         );
  29.          function drewEcharts(ec) {
  30.  
  31.                 console.log("1");
  32.                 // 基于准备好的dom，初始化echarts图表
  33.                 myChart = ec.init(document.getElementById('main'));
  34.                 console.log("2");
  35.                 var option = {
  36.                     tooltip: {
  37.                         show: true
  38.                     },
  39.                     legend: {
  40.                         data:['销量']
  41.                     },
  42.                     xAxis : [
  43.                         {
  44.                             type : 'category',
  45.  
  46.                         }
  47.                     ],
  48.                     yAxis : [
  49.                         {
  50.                             type : 'value'
  51.                         }
  52.                     ],
  53.                     series : [
  54.                         {
  55.                             "name":"销量",
  56.                             "type":"bar",
  57.  
  58.                         }
  59.                     ]
  60.                 };
                    //加载数据
  61.                 loadDATA(option);
  62.                 // 为echarts对象加载数据
  63.                 myChart.setOption(option); 
  64.  
  65.         }
  66.         function loadDATA(option){
  67.             $.ajax({
  68.                type : "post",
  69.                async : false, //同步执行
  70.                url : "bar.do",
  71.                data : {},
  72.                dataType : "json", //返回数据形式为json
  73.                success : function(result) {
  74.                           if (result) {
                                     //初始化option.xAxis[0]中的data
  75.                                   option.xAxis[0].data=[];
  76.                                   for(var i=0;i<result.length;i++){
  77.                                     option.xAxis[0].data.push(result[i].name);
  78.                                   }
                                      //初始化option.series[0]中的data
  79.                                   option.series[0].data=[];
  80.                                   for(var i=0;i<result.length;i++){
  81.                                     option.series[0].data.push(result[i].num);
  82.                                   }
  83.                            }
  84.                         }
  85.             });
  86.        }
  87.     </script>
  88. </body>
  1.  

3.在前一步中AJAX的POST请求的路径是 url : "bar.do" 在web.xml中配置以下映射如下图：

  1.   <servlet>
  2.     <servlet-name>helloBar</servlet-name>
  3.     <servlet-class>com.helloBar</servlet-class>
  4.   </servlet>
  5.   <servlet-mapping>
  6.   <servlet-name>helloBar</servlet-name>
  7.   <url-pattern>/bar.do</url-pattern>
  8.   </servlet-mapping>

这样，通过bar.do就会找到com这个包下面的helloBar这个servlet.这个servlet的主要作用是向数据库读取数据并返回给前段页面，这里我用的是局部数据源去链接，关于局部数据源怎么连这里我就不讲述了，不会的同学可以在我的博客中找到。当然也可以使用最基本的JDBC去连接。

  1. public void doPost(HttpServletRequest request, HttpServletResponse response)
  2.             throws ServletException, IOException {
            //创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作
  3.         barDAO bardao=new barDAO();
            //调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean
  4.         ArrayList<barBean> array = bardao.select_all();
            //设置返回时的编码格式
  5.         response.setContentType("text/html; charset=utf-8");
            //调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
  6.         JSONArray json=JSONArray.fromObject(array);
  7.         System.out.println(json.toString());
            //返回给前段页面
  8.         PrintWriter out = response.getWriter();
  9.         out.println(json);
  10.         out.flush();
  11.         out.close();   
    }

数据库的bar表格式如下图：

barBean的代码：

  1. import java.io.Serializable;
  2. import java.sql.Date;
  3. public class barBean {
  4.     private String name;
  5.     private int num;
  6.     public String getName() {
  7.         return name;
  8.     }
  9.     public void setName(String name) {
  10.         this.name = name;
  11.     }
  12.     public int getNum() {
  13.         return num;
  14.     }
  15.     public void setNum(int num) {
  16.         this.num = num;
  17.     }
  18.  
  19. }

barDAO的代码：

  1. public class barDAO {
  2.         private static InitialContext context = null;
  3.         private DataSource dataSource = null;
  4.         private static final String SELECT_ALL = "SELECT*FROM bar ";
  5.         public barDAO(){
  6.             try{
  7.                 if(context == null){
  8.                     context = new InitialContext();
  9.                 }
  10.                 dataSource = (DataSource)context.lookup("java:comp/env/jdbc/sampleDS");
  11.             }catch(NamingException e2){
  12.  
  13.             }
  14.         }
  15.         public Connection getConnection(){
  16.             Connection conn = null;
  17.             try{
  18.                 conn = dataSource.getConnection();
  19.             }catch(SQLException e){}
  20.             return conn;
  21.         }
  22.         public ArrayList<barBean> select_all()
  23.         {
  24.              Connection conn = null;
  25.              PreparedStatement pstmt = null;
  26.              ResultSet rst = null;
  27.             try{
  28.                 conn = dataSource.getConnection();
  29.                 pstmt = conn.prepareStatement(SELECT_ALL);
  30.  
  31.                 rst = pstmt.executeQuery();
  32.                 ArrayList<barBean> array = new ArrayList<barBean>();
  33.                 while(rst.next())
  34.                 {
  35.                     barBean bar = new barBean();
  36.                     bar.setName(rst.getString("name"));
  37.                     bar.setNum(rst.getInt("num"));
  38.                     array.add(bar);
  39.                 }
  40.                 pstmt.close();
  41.                 rst.close();
  42.                 return array;
  43.             }catch(SQLException e){
  44.                 System.out.println("Error occured at barDAO->select_all()");
  45.                 return new ArrayList<barBean>();
  46.             }finally{
  47.                 try{
  48.                     conn.close();
  49.                 }catch(SQLException e){
  50.                     System.out.println("Error occured at closing connection in barDAO");
  51.                 }
  52.             }
  53.         }
  54.  
  55. }

4.前段的页面在确认ajax请求success以后，读取返回后的数组的内容。就可以显示了。

echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端的更多相关文章

  1. 【03】AJAX 向服务器发送请求

    AJAX 向服务器发送请求   创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...

  2. AJAX - 向服务器发送请求请求

    AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...

  3. nodejs向远程服务器发送post请求----融云Web SDK/客户端获取token

    最近要用到一个叫融云的及时通讯的SDK,在获取token这个步骤的时候有点卡顿,以防以后碰到类似的问题,再此记录一下. 客户端通过融云 SDK 每次连接服务器时,都需要向服务器提供 Token,以便验 ...

  4. AJAX向服务器发送请求

    使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...

  5. Android 给服务器发送网络请求

    今天听得有点蒙,因为服务器的问题,这边建立服务器的话,学长用的是Idea建立的Spring之类的方法去搞服务器. 然后就是用Android去给这个服务器发送请求,大致效果还是懂的,就是像网站发送请求, ...

  6. 向服务器发送post请求

    /** * 通过HttpClient发送Post请求 * @param path 请求路径 * @param params 请求参数 * @param encoding 编码 * @return 请求 ...

  7. andlua,andlua发送http请求，并解析json数据

    andlua发送http请求,并解析json实例 import'cjson'import 'http'--导入cjson库url = 'https://www.baidu,com'--设置urlHtt ...

  8. Springmvc中 同步/异步请求参数的传递以及数据的返回

    转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...

  9. springmvc中同步/异步请求参数的传递以及数据的返回

    注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方式,以及将处理后的model 传向前台***** 1.前台传递数据的接受:传的属性名和javabean的属性相同 ...

随机推荐

  1. Linux上修改weblogic的内存大小

    我们经常在使用WebLoigc部署应用程序后,发现程序运行速度并不是很快,遇到这种情况我们可以尝试调整启动时分配的内存,设置方法有两种: 一.在../domain/setDomainEnv.sh文件中 ...

  2. Nodejs_day01

    helloworld.txt的内容: 我是nodejs 阻塞式调用 var fs = require('fs'); var data = fs.readFileSync('helloworld.txt ...

  3. 《Windows程序设计第5版》学习进度备忘

    书签:另外跳过的内容有待跟进 __________________学习资源: <Windows程序设计第5版珍藏版> __________________知识基础支持: _________ ...

  4. bzoj 3757 苹果树（树上莫队算法）

    [题意] 有若干个询问,询问路径u,v上的颜色总数,另外有要求a,b,意为将a颜色看作b颜色. [思路] vfk真是神系列233. Quote: 用S(v, u)代表 v到u的路径上的结点的集合. 用 ...

  5. Camel In Action 阅读笔记 第一章 认识Camel 1.1 Camel 介绍

    1.1 Camel 介绍 Camel 是一个为了您的项目集成变得高效有趣的集成框架,Camel 项目在2007年初开始的,相对来说它还比较年轻,但它已然是一个非常成熟的开源项目,它所使用的是Apach ...

  6. NSRangeFromString 测试

    官网文档 Returns a range from a textual representation. Declaration SWIFT func NSRangeFromString(_ aStri ...

  7. HBase高性能复杂条件查询引擎---二级多列索引

    http://www.infoq.com/cn/articles/hbase-second-index-engine 原理 “二级多列索引”是针对目标记录的某个或某些列建立的“键-值”数据,以列的值为 ...

  8. Hadoop中的辅助类ToolRunner和Configured的用法详解

    在开始学习hadoop时,最痛苦的一件事就是难以理解所写程序的执行过程,让我们先来看这个实例,这个测试类ToolRunnerTest继承Configured的基础上实现了Tool接口,下面对其用到的基 ...

  9. 【原创】MapReduce编程系列之二元排序

    普通排序实现 普通排序的实现利用了按姓名的排序,调用了默认的对key的HashPartition函数来实现数据的分组.partition操作之后写入磁盘时会对数据进行排序操作(对一个分区内的数据作排序 ...

  10. C++11 语法记录

    转自:http://blog.csdn.net/crayondeng/article/details/18563121 一.Lambda表达式 C++ 11中的Lambda表达式用于定义并创建匿名的函 ...