Echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

最新推荐文章于 2021-06-19 14:22:31 发布

晚星9527

最新推荐文章于 2021-06-19 14:22:31 发布

阅读量1.9k

点赞数 3

分类专栏： Echarts 文章标签： Echarts学习

本文链接：https://blog.youkuaiyun.com/weixin_43687961/article/details/84752727

版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

从Echarts官网文档教程上可以找到一个最简单的Echarts图表：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="echarts/echarts.common.min.js"></script>

<title>Holle Echarts!</title>
</head>
<body>
 <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

上述代码中的xAxis中的 data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]和series中的data: [5, 20, 36, 10, 10, 20]都是给定的，那么如何从读取数据库中的数据呢，下面我们将修改这俩个地方，并采用AJAX发送post请求。

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello ECharts</title>
<script src="echarts/echarts.common.min.js"></script>
<script src="echarts/jquery-3.2.1.js"></script>
</head>
<body>
	<h2>Hello Echarts!</h2>
	<div id="myDiv" style="height: 400px"></div>
	<script type="text/javascript">
	
	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);
		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()
		
	</script>
</body>
</html>

下一步我们在web.xml中配置以下映射：

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

这样，通过bar.do就会找到com.servlet这个包下面的BarService.这个servlet的主要作用是向数据库读取数据并返回给前段页面，下面是这个里面的代码：

package com.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.bean.Bar;
import com.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("------------------------");
		System.out.println(json.toString());
		//返回到JSP
		PrintWriter writer = resp.getWriter();
		writer.println(json);
		writer.flush();
		//关闭输出流
		writer.close();
	}

这里我用的是局部数据源去链接，当然也可以使用最基本的JDBC去连接。(提示一点，数据库要连你自己建的数据库，数据库账号，密码也要根据你的改，查询数据从你建的那个表名查。）

package com.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.bean.Bar;
 
public class BarDao {
 
	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/echarts?characterEncoding=utf8", "root", "123");
			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;
	}
}

com.bean的代码：

package com.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;
	}
	
}

数据库的bar表格式如下图：
在这里插入图片描述
4.前段的页面在确认ajax请求success以后，读取返回后的数组的内容。就可以显示了。

特别强调一点：jar包问题！

一个是echarts.common.min.js包和jquery-3.2.1.js导入，还有就是使用JSON时必要的jar包：（若根据上述代码出现无法显示数据，则90%可能因为缺少以下jar）
ezmorph-1.0.6.jar
commons-lang 2.4.jar
commons-beanutils 1.7.0.jar
commons-collections 3.2.jar
commons-logging 1.1.1 .jar
如有需要，去另一个我的文章中免费下载：
https://blog.youkuaiyun.com/weixin_43687961/article/details/84760848