使用AJAX向ECharts送入MySQL中的数据1：doPost方式

（适合像我这样的新手使用）

最近学完了ECharts官方推出的视频教程，了解了常用表格的个性化定制方法，但却并没有真正将其应用到我们的项目（Java Web项目）中。官方的所有业务都是与数据可视化相关的，具体到每一种项目，对于新手来说，只能通过论坛、博客或第三方技术教程网站来学习。为了让大家尽快地将ECharts应用到项目中，我也通过边学边做的方式，与大家共同来探讨！

为了使我们更专注于后台与前台交互的实现，我使用的例子是官方的Get Started中的实例，可谓简单易懂。

1.创建数据表

首先创建数据库test，为了防止出现中文乱码，选择编码格式为utf8。

其次创建数据表bar，sql如下：

CREATE TABLE `bar` (                                       
          `name` varchar(20) DEFAULT NULL COMMENT '服装名称',`num` int(11) DEFAULT NULL COMMENT '对应数量'        
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8

我使用的IDE是最新的eclipse MARS，首先新建项目Dynamic Web Project，命名为echarts_demo，其他的默认即可。

附：最终的项目结构

其次设置JRE、导包。如果直接Import我的项目，可能需要重新设置JRE的路径。使用Servlet的方式获取后台数据并使用AJAX更新JSP需要导入下面的包，否则会抛出ClassNotFoundException。

commons-beanutils-1.9.3.jar

commons-collections-3.2.2.jar

commons-lang-2.4.jar

commons-logging-1.2.jar

ezmorph-1.0.6.jar

json-lib-2.4-jdk15.jar

最后导入本次项目使用到的JS文件，echarts-all.js和jquery.js。

3.创建Bean对象

在src目录下新建包com.lgw.bean，并创建对象Bar，代码如下：

package com.lgw.bean;

public class Bar {
	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;
	}
	
}

本例使用的是最原始也是最简单的JDBC的方式连接MySQL数据库，也是为了更专注于交互实现。

在src目录下新建包com.lgw.dao，并创建对象BarDao，代码如下：

package com.lgw.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.lgw.bean.Bar;

public class BarDao {

	/**
	 * @author wen
	 * 
	 * 查询所有数据
	 * @return 存放所有数据的线性表
	 */
	public ArrayList<Bar> query() {
		ArrayList<Bar> barArr = new ArrayList<Bar>();
		try {
			//JDBC方式连接MySQL数据库
			Class.forName("com.mysql.jdbc.Driver");
			Connection conn = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/test?characterEncoding=utf8","root","");
			PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar");
			ResultSet rs = stmt.executeQuery();
			//将test表中的数据存储到线性表中
			while(rs.next()) {
				Bar bar = new Bar();
				bar.setName(rs.getString("name"));
				bar.setNum(rs.getInt("num"));
				barArr.add(bar);
			}
			//关闭连接
			conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		return barArr;
	}
}

在src目录下新建包com.lgw.servlet，并创建对象BarService，代码如下：

package com.lgw.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.lgw.bean.Bar;
import com.lgw.dao.BarDao;

import net.sf.json.JSONArray;

public class BarService extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException {
		//创建DAO
		BarDao barDao = new BarDao();
		//从数据库里取数据
		ArrayList<Bar> barArr = barDao.query();
		//设置服务器响应时向JSP表示层传输数据的编码格式
		resp.setContentType("text/html; charset=utf-8");
		//ArrayList对象转化为JSON对象
		JSONArray json = JSONArray.fromObject(barArr);
		//控制台显示JSON
		System.out.println(json.toString());
		//返回到JSP
		PrintWriter writer = resp.getWriter();
		writer.println(json);
		writer.flush();
		//关闭输出流
		writer.close();
	}
}

需要了解的是ECharts前台可接受的数据格式是JSON，因此需要将ArrayList转化为JSONArray。另外，传输数据使用的方式是post，因此在AJAX中配置相应的传输类型。

在配置文件中注册servlet，并定义url-pattern，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<welcome-file-list>
		<welcome-file>test.jsp</welcome-file>
	</welcome-file-list>

	<!-- 注册servlet -->
	<servlet>
		<servlet-name>barService</servlet-name>
		<servlet-class>com.lgw.servlet.BarService</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>barService</servlet-name>
		<url-pattern>/bar.do</url-pattern>
	</servlet-mapping>
</web-app>

7.最需要关心的一个步骤：编写JSP前台并简单配置ECharts

这里使用的就是官方的Get Started的实例，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort()	+ path + "/";
%>
<!DOCTYPE>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Hello ECharts</title>
	<!-- 使用单文件引入的方式使用ECharts.JS -->
	<script src="echarts-all.js"></script>
	<script src="jquery.js"></script>
</head>
<body>
	<!-- DOM用来设置展示ECharts图表的区域 -->
	<div id="myDiv" style="height: 400px"></div>
	<script type="text/javascript">
		function loadData(option) {
			$.ajax({
				type : 'post',//传输类型
				async : false,//同步执行
				url : 'bar.do',//web.xml中注册的Servlet的url-pattern
				data : {},dataType : 'json',//返回数据形式为json
				success : function(result) {
					if (result) {
						//初始化xAxis[0]的data
						option.xAxis[0].data = [];
						for (var i=0; i<result.length; i++) {
							option.xAxis[0].data.push(result[i].name);
						}
						//初始化series[0]的data
						option.series[0].data = [];
						for (var i=0; i<result.length; i++) {
							option.series[0].data.push(result[i].num);
						}
					}
				},error : function(errorMsg) {
					alert("加载数据失败");
				}
			});//AJAX
		}//loadData()
		var myChart = echarts.init(document.getElementById('myDiv'));
		var option = {
			tooltip : {
				show : true
			},legend : {
				data : [ '销量' ]
			},xAxis : [ {
				type : 'category'
			} ],yAxis : [ {
				type : 'value'
			} ],series : [ {
				name : '销量',type : 'bar'
			} ]
		};
		//加载数据到option
		loadData(option);
		//设置option
		myChart.setOption(option);
	</script>
</body>

另附上我的Demo，大家可以尝试运行一下，欢迎指正！

http://download.csdn.net/detail/tgcxmxyz1011/9694411

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!