您的位置：首页 > Web前端

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

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

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



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

<!DOCTYPEhtml>
<head>
<metacharset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的Dom-->
<divid="main"style="height:400px"></div>
</body>


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

<scriptsrc="echarts/esl.js"></script>
<scriptsrc="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图表
varmyChart=ec.init(document.getElementById('main'));

varoption={
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请求

<!DOCTYPEhtml>
<head>
<metacharset="utf-8">
<title>ECharts</title>
<!--来自百度CDN-->
<scriptsrc="echarts/esl.js"></script>
<scriptsrc="echarts/jquery.min.js"></script>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的Dom-->
<divid="main"style="height:400px"></div>
<scripttype="text/javascript">
//路径配置
require.config({
paths:{
'echarts':'echarts/echarts',
'echarts/chart/bar':'echarts/echarts'
}
});

//使用
require(
[
'echarts',
'echarts/chart/bar'//使用柱状图就加载bar模块，按需加载
],
drewEcharts
);
functiondrewEcharts(ec){

console.log("1");
//基于准备好的dom，初始化echarts图表
myChart=ec.init(document.getElementById('main'));
console.log("2");
varoption={
tooltip:{
show:true
},
legend:{
data:['销量']
},
xAxis:[
{
type:'category',

}
],
yAxis:[
{
type:'value'
}
],
series:[
{
"name":"销量",
"type":"bar",

}
]
};
//加载数据
loadDATA(option);
//为echarts对象加载数据
myChart.setOption(option);

}
functionloadDATA(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(vari=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].name);
}
//初始化option.series[0]中的data
option.series[0].data=[];
for(vari=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去连接。

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
//创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作
barDAObardao=newbarDAO();
//调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean
ArrayList<barBean>array=bardao.select_all();
//设置返回时的编码格式
response.setContentType("text/html;charset=utf-8");
//调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
JSONArrayjson=JSONArray.fromObject(array);
System.out.println(json.toString());
//返回给前段页面
PrintWriterout=response.getWriter();
out.println(json);
out.flush();
out.close();
}


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



barBean的代码：

importjava.io.Serializable;
importjava.sql.Date;
publicclassbarBean{
privateStringname;
privateintnum;
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicintgetNum(){
returnnum;
}
publicvoidsetNum(intnum){
this.num=num;
}

}


barDAO的代码：

publicclassbarDAO{
privatestaticInitialContextcontext=null;
privateDataSourcedataSource=null;
privatestaticfinalStringSELECT_ALL="SELECT*FROMbar";
publicbarDAO(){
try{
if(context==null){
context=newInitialContext();
}
dataSource=(DataSource)context.lookup("java:comp/env/jdbc/sampleDS");
}catch(NamingExceptione2){

}
}
publicConnectiongetConnection(){
Connectionconn=null;
try{
conn=dataSource.getConnection();
}catch(SQLExceptione){}
returnconn;
}
publicArrayList<barBean>select_all()
{
Connectionconn=null;
PreparedStatementpstmt=null;
ResultSetrst=null;
try{
conn=dataSource.getConnection();
pstmt=conn.prepareStatement(SELECT_ALL);

rst=pstmt.executeQuery();
ArrayList<barBean>array=newArrayList<barBean>();
while(rst.next())
{
barBeanbar=newbarBean();
bar.setName(rst.getString("name"));
bar.setNum(rst.getInt("num"));
array.add(bar);
}
pstmt.close();
rst.close();
returnarray;
}catch(SQLExceptione){
System.out.println("ErroroccuredatbarDAO->select_all()");
returnnewArrayList<barBean>();
}finally{
try{
conn.close();
}catch(SQLExceptione){
System.out.println("ErroroccuredatclosingconnectioninbarDAO");
}
}
}

}


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


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航