引包

 

http://s13/mw690/005zLPFUzy72QWXMd525c&690和javaweb以json传值进行交互" TITLE="Echarts通过jquery调用Ajax 和javaweb以json传值进行交互" />

body

http://s10/mw690/005zLPFUzy72QWXOVPb29&690和javaweb以json传值进行交互" TITLE="Echarts通过jquery调用Ajax 和javaweb以json传值进行交互" />

 

 

js

var myChart = echarts.init(document.getElementByIdx_x('main'));

  // 显示标题，图例和空的坐标轴
  myChart.setOption({
   title : {
    text : '异步数据加载示例'
   },
   tooltip : {},
   legend : {
    data : [ '销量' ]
   },
   xAxis : {
    data : []
   },
   yAxis : {},
   series : [ {
    name : '销量',
    type : 'bar',
    data : []
   } ]
  });
  myChart.showLoading();// 加载动画
  // 异步加载数据
  $.post('/Ajax_Test/helloBar').done(function(data) {//jQuery触发ajax 从后台异步获取数据
   var str = eval_r('(' + data + ')'); //解析json
   myChart.hideLoading();
   // 填入数据
   myChart.setOption({
    xAxis : {
     data : str.name
    },
    series : [ {
     // 根据名字对应到相应的系列
     name : '人物信息',
     type : 'bar',
     data : str.id
    } ]
   });
  });

http://s8/mw690/005zLPFUzy72QWXRIPle7&690和javaweb以json传值进行交互" TITLE="Echarts通过jquery调用Ajax 和javaweb以json传值进行交互" />

    

 

 

 

public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  System.out.println("执行doPost");
  barDAO bar = new barDAO();
  JSONObject array = new JSONObject(); 
  try {

   array =  bar.select_all();  //调用方法获取数据
   response.setContentType("text/html; charset=utf-8");// 设置返回时的编码格式
   System.out.println(array.toString());  //控制台打印输出
   // 返回给前段页面
   PrintWriter out = response.getWriter();
   out.println(array);                   //把json返回到界面
   out.flush();
   out.close();
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }

 

public JSONObject select_all() throws SQLException {// 单位时间用户点击影片排行

  ConnDB conndb = new ConnDB(); // 获取数据库连接
  Connection conn = conndb.getConnection();
  System.out.println("测试数据库连接");
  try {
   String sql = "SELECT * from bar";

   JSONObject array = new JSONObject();
   System.out.println("测试sql执行");
   ps = conn.prepareStatement(sql);

   rs = ps.executeQuery();
   List listname = new ArrayList();
   List listid = new ArrayList();

   int []id =new int[255];
   String []name =new String[255];

   String watchtime ="";
   String avgwatchtime ="";
   int i = 0;
   while (rs.next()) { // 获取数据
    id[i] = rs.getInt("id");
    name[i] = rs.getString("name");
    listname.add(name[i]);
    listid.add(id[i]);
    i++;
   }
   JSONObject jsonData = new JSONObject(); // 直接把id 和用户名 存为 json格式
   jsonData.put("name", listname);
   jsonData.put("id", listid);
   ps.close();
   rs.close();
   if (ps != null)
    ps.close();
   if (rs != null)
    rs.close();
   if (conn != null)
    conn.close();
   return jsonData;
  }
  finally {
   try {
    conn.close();
   } catch (SQLException e) {
    System.out
    .println("Error occured at closing connection in barDAO");
   }
  }

 }

 

 

http://s6/mw690/005zLPFUzy72QWlYDaZ75&690和javaweb以json传值进行交互" TITLE="Echarts通过jquery调用Ajax 和javaweb以json传值进行交互" />

 

原理： 本贴是一个应用echarts 的一个十分基础的demo，首先在服务器发布一个jsp页面作为我们的测试页面，然后由于需要用到ajax和jQuery ，

初次使用就直接使用var myChart = echarts.init(document.getElementByIdx_x_x('main'));在页面上直接加载

然后通过ajax url中的地址向我们后台的servlet发起请求，然后再调用jdbc中的数据库相关sql，接着利用while循环，把返回结果存到我们的数组里面，然后把这些数组放在list当中，接着转换为json格式发送到测试页面，

 

如果是成功执行，就会走到js中 ajax成功接收到返回值的那一步，然后使用dval来对返回来的值进行解析，然后再把值赋值在echarts上面，由于echarts 是外部引用的，所以相关的js，jQuery包都需要引用，地址不要写错

 

页面容易布置，数据库服务、账户信息 密码 都容易报错 

不要忘了引包，