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</headbody<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    div id="main" style="height:400px"></div>

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

 script src="echarts/esl.js"script>
 src="echarts/jquery.min.js" 路径配置 
 // 路径配置
 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",0)"> "data":[5,20,40,10,20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } );

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

来自百度CDN type="text/javascript"> // 路径配置 require.config({ paths:{ ‘echarts : echarts/echarts,echarts/chart/bar } }); 使用 require( [ ‘ 使用柱状图就加载bar模块，按需加载 ],drewEcharts ); function drewEcharts(ec) { 基于准备好的dom，初始化echarts图表 myChart = ec.init(document.getElementById(main)); var option { tooltip: { show: true },legend: { data:[销量] },xAxis : [ { type : category(){ arr[]; $.ajax({ type : "postfalse同步执行 url : bar.dodata : {},dataType : json返回数据形式为json success : (result) { if (result) { for( i0;i<result.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } },error : (errorMsg) { alert(不好意思，大爷，图表请求数据失败啦!); myChart.hideLoading(); } }) return arr; })() } ],yAxis : [ { value } ],series : [ { name:typebardata:((){ []; $.ajax({ ){ console.log(result[i].num); arr.push(result[i].num); } } },245)">); myChart.hideLoading(); } }) arr; })() } ] }; 为echarts对象加载数据 myChart.setOption(option); } 3.在前一步中AJAX的POST请求的路径是url : "bar.do"在web.xml中配置以下映射如下图：

  servletservlet-name>helloBarservlet-class>com.helloBar>
  servlet-mappingurl-pattern>/bar.doservlet-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
        ArrayListbarBean> 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 select_all() { Connection conn = null; PreparedStatement pstmt = null; ResultSet rst = null; try{ conn = dataSource.getConnection(); pstmt = conn.prepareStatement(SELECT_ALL); rst = pstmt.executeQuery(); ArrayList> array = new ArrayList(); 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(); }finally{ try{ conn.close(); }catch(sqlException e){ System.out.println("Error occured at closing connection in barDAO"); } } } }

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

echarts通过ajax向服务器发送post请求,布布扣,bubuko.com

原文链接：https://www.f2er.com/ajax/163843.html

上一篇：ajax 同部和异步的差别下一篇：【AJAX】你的知识需要总结

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

猜你在找的Ajax相关文章