echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
1.echarts的官网上的demo，都是直接写死的随机数据，没有和数据库的交互，所以就自己写了一下，ok，我们开始一步一步走一遍整个流程吧。
就以官网最简单的那个小demo来做修改吧。官网上的小demo的效果图如下：（很熟悉，有没有）
2.按照echarts的使用方法新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom(讲的有点细，熟悉的朋友直接跳过)
<!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请求做准备
<script src="echarts/esl.js"></script>
<script src="echarts/jquery.min.js"></script>
路径配置
// 路径配置
require.config({
paths:{
'echarts' : 'echarts/echarts',
'echarts/chart/bar' : 'echarts/echarts'
}
});
最后是使用：以下代码是官网上的，红色部分的data数据等一下我们修改一下从数据库中去读取
// 使用
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请求
<!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去连接。
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");
}
}
}
}
4.前段的页面在确认ajax请求success以后，读取返回后的数组的内容。就可以显示了。
echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端的更多相关文章
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- AJAX - 向服务器发送请求请求
AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...
- nodejs向远程服务器发送post请求----融云Web SDK/客户端获取token
最近要用到一个叫融云的及时通讯的SDK,在获取token这个步骤的时候有点卡顿,以防以后碰到类似的问题,再此记录一下. 客户端通过融云 SDK 每次连接服务器时,都需要向服务器提供 Token,以便验 ...
- AJAX向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...
- Android 给服务器发送网络请求
今天听得有点蒙,因为服务器的问题,这边建立服务器的话,学长用的是Idea建立的Spring之类的方法去搞服务器. 然后就是用Android去给这个服务器发送请求,大致效果还是懂的,就是像网站发送请求, ...
- 向服务器发送post请求
/** * 通过HttpClient发送Post请求 * @param path 请求路径 * @param params 请求参数 * @param encoding 编码 * @return 请求 ...
- andlua,andlua发送http请求，并解析json数据
andlua发送http请求,并解析json实例 import'cjson'import 'http'--导入cjson库url = 'https://www.baidu,com'--设置urlHtt ...
- Springmvc中 同步/异步请求参数的传递以及数据的返回
转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...
- springmvc中同步/异步请求参数的传递以及数据的返回
注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方式,以及将处理后的model 传向前台***** 1.前台传递数据的接受:传的属性名和javabean的属性相同 ...
随机推荐
- Tesseract-OCR识别验证码
1. 安装Tesseract-OCR,安装后测试下是否安装成功
- CMDB反思3
CMDB模型设计1 http://blog.vsharing.com/xqscool/A1274634.html 分类的问题上比较有感悟.在之前编写新版的CMDB模型的时候,曾将刀片机.x86服务器. ...
- 获取 windows地址栏 网页地址栏 文件名
int start=str.LastIndexOf("\\"); fileName=str.SubString(start+1,str.Length-start-1); int s ...
- OPENGL学习笔记整理（五）：着色语言
有些事情本身就是十分奇怪的.在传统上,图形硬件的设计目的是用于快速执行相同的硬编译指令集.不同的计算步骤可以被跳过,参数可以被调整,但计算本身确实固定不变的.然而,随着技术的发展,却越来越变得可以编程 ...
- Hadoop 中疑问解析
Hadoop 中疑问解析 FAQ问题剖析 一.HDFS 文件备份与数据安全性分析1 HDFS 原理分析1.1 Hdfs master/slave模型 hdfs采用的是master/slave模型,一个 ...
- 转】MyEclipse使用总结——设置MyEclipse使用的Tomcat服务器
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/3935499.html 感谢! 一.设置使用的Tomcat服务器 如果不想使用MyEclipse自带的tomcat ...
- 【MySql】在Linux下安装MySql数据库
[参数环境] 1.Host OS:Win7 64bit 2.VM: VMware 11.1.0 3.Client OS:CentOS 6 4.系统中已安装的openssl版本: openssl-1.0 ...
- Codeforces 711 D. Directed Roads (DFS判环)
题目链接:http://codeforces.com/problemset/problem/711/D 给你一个n个节点n条边的有向图,可以把一条边反向,现在问有多少种方式可以使这个图没有环. 每个连 ...
- UVaLive 6802 Turtle Graphics (水题，模拟)
题意:给定一个坐标,和一行命令,按照命令走,问你有多少点会被访问超过一次. 析:很简单么,按命令模拟就好,注意有的点可能走了多次,只能记作一次. 代码如下: #pragma comment(linke ...
- URAL 2068 Game of Nuts (博弈)
题意:给定 n 堆石子,每次一个人把它们分成三堆都是奇数的,谁先不能分,谁输. 析:因为每堆都是奇数,那么最后肯定都是要分成1的,那么就把不是1的全加和,然后判断奇偶就OK了. 代码如下: #prag ...