zoukankan      html  css  js  c++  java

  • 最简单，小白易上手 ajax请求数据库信息，echarts页面显示，无需跳转servlet

    ajax 代码：

    $.ajax({
    type : "post",
    async : true,
    url : "${pageContext.request.contextPath}/charts",
    type:"POST",
    data:
        {
        "method":"huizhu"
        },
    dataType:"json",
    success:function(result) {
        
        if(result)
        {
            myChart.hideLoading();
               
               myChart.setOption({        //加载数据图表
                xAxis: {
                    data: result.xAxis
                },
                series: [
                    {
                        data: result.series[0].data
                     },
                     {
                         data: result.series[0].data
                      }
                    ]
            });
        }
                  
   },
    error : function(errorMsg) {
        //请求失败时执行该函数
    alert("请求数据失败!");
   // myChart.hideLoading();
    }
});

    servlet代码：

     1    private void Zhu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 2           // TODO Auto-generated method stub
 3           //response.getWriter().append("Served at: ").append(request.getContextPath());
 4           req.setCharacterEncoding("utf-8");
 5           resp.setContentType("text/html;charset=utf-8");
 6           HttpSession session=req.getSession();
 7           PrintWriter out=resp.getWriter();
 8         System.out.println("AAAAAAAAAAAAA");
 9         //resp.sendRedirect(req.getContextPath() + "/right.jsp");
10         List<String> xAxisData = new ArrayList<String>();  
11         List<JSONObject> seriesList = new ArrayList< JSONObject>(); 
12         
13         List<AnalysisBean> beans=new ArrayList<AnalysisBean>();
14         beans=AnalysisDao.select_answer();
15         for(AnalysisBean n:beans)
16         {
17             String str=n.getName();
18             xAxisData.add(str);
19         }
20         List<Integer> list=new ArrayList<Integer>();
21         
22         for(AnalysisBean n:beans)
23         {
24             int nu=Integer.parseInt(n.getNum());
25             list.add(nu);
26         }
27         
28          Series series=new Series("回答问题机构","bar",list);
29          JSONObject job = new JSONObject();
30          job.put("name", series.getName());
31          job.put("type", series.getType());
32          job.put("data",series.getData());  
33          seriesList.add(job); 
34          
35          series=new Series("回答问题机构","line",list);
36          job = new JSONObject();
37          job.put("name", series.getName());
38          job.put("type", series.getType());
39          job.put("data",series.getData());  
40          seriesList.add(job); 
41          
42          JSONObject jsob = new JSONObject(); 
43          jsob.put("xAxis", xAxisData);  
44          jsob.put("series", seriesList); 
45          
46         resp.setCharacterEncoding("UTF-8");
47         System.out.println(jsob.toString());
48           //resp.sendRedirect(req.getContextPath() + "/admin/child/Child_11/1_Rcai.jsp");
49         resp.getWriter().write(jsob.toString());
50           }

    所有代码：

    html:

      1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html>
  4 <html style="height: 100%">
  5    <head>
  6        <meta charset="utf-8">
  7    </head>
  8    <body style="height: 100%; margin: 0">
  9        <div id="container" style="height: 100%"></div>
 10        <script type="text/javascript" src="${pageContext.request.contextPath}/static/echarts.min.js"></script>
 11    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-1.11.3.min.js"></script>
 12        <script type="text/javascript">
 13 var dom = document.getElementById("container");
 14 var myChart = echarts.init(dom);
 15 var app = {};
 16 option = null;
 17 option = {
 18         title: {
 19             text: '回答类型排序',
 20             subtext: '数据为真实数据'
 21         },
 22     tooltip: {
 23         trigger: 'axis',
 24         axisPointer: {
 25             type: 'cross',
 26             crossStyle: {
 27                 color: '#999'
 28             }
 29         }
 30     },
 31     toolbox: {
 32         feature: {
 33             dataView: {show: true, readOnly: false},
 34             magicType: {show: true, type: ['line', 'bar']},
 35             restore: {show: true},
 36             saveAsImage: {show: true}
 37         }
 38     },
 39     
 40     
 41     
 42     
 43     legend: {
 44         data: ['回答问题机构', '平均温度']
 45     },
 46     xAxis: [
 47         {
 48             type: 'category',
 49             data:[],
 50             axisLabel: {  
 51                 interval: 0,  
 52                 formatter:function(value)  
 53                 {  
 54                     debugger  
 55                     var ret = "";//拼接加
返回的类目项  
 56                     var maxLength = 2;//每项显示文字个数  
 57                     var valLength = value.length;//X轴类目项的文字个数  
 58                     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
 59                     if (rowN > 1)//如果类目项的文字大于3,  
 60                     {  
 61                         for (var i = 0; i < rowN; i++) {  
 62                             var temp = "";//每次截取的字符串  
 63                             var start = i * maxLength;//开始截取的位置  
 64                             var end = start + maxLength;//结束截取的位置  
 65                             //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
 66                             temp = value.substring(start, end) + "
";  
 67                             ret += temp; //凭借最终的字符串  
 68                         }  
 69                         return ret;  
 70                     }  
 71                     else {  
 72                         return value;  
 73                     }  
 74                 }  
 75             },
 76         grid: {  
 77                 left: '10%',  
 78                 bottom:'35%'  
 79         }
 80 
 81         }
 82     ],
 83     yAxis: [
 84         {
 85             type: 'value',
 86 
 87         }
 88     ],
 89     series: [
 90         {
 91             name: '回答问题机构',
 92             type: 'bar',
 93             data: []
 94          },
 95 
 96         {
 97             name: '回答问题机构',
 98             type: 'line',
 99             data:[]
100         }
101     ]
102 };
103 
104 myChart.showLoading(); 
105 
106 $.ajax({
107     type : "post",
108     async : true,
109     url : "${pageContext.request.contextPath}/charts",
110     type:"POST",
111     data:
112         {
113         "method":"huizhu"
114         },
115     dataType:"json",
116     success:function(result) {
117         
118         if(result)
119         {
120             myChart.hideLoading();
121                
122                myChart.setOption({        //加载数据图表
123                 xAxis: {
124                     data: result.xAxis
125                 },
126                 series: [
127                     {
128                         data: result.series[0].data
129                      },
130                      {
131                          data: result.series[0].data
132                       }
133                     ]
134             });
135         }
136                   
137    },
138     error : function(errorMsg) {
139         //请求失败时执行该函数
140     alert("请求数据失败!");
141    // myChart.hideLoading();
142     }
143 });
144 if (option && typeof option === "object") {
145     myChart.setOption(option, true);
146 }
147 
148        </script>
149    </body>
150 </html>
    ECHARTS

    SEWRVLET:

     1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.ArrayList;
 6 import java.util.List;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 import javax.servlet.http.HttpSession;
14 
15 import org.json.JSONArray;
16 import com.bean.AnalysisBean;
17 import com.bean.Series;
18 import com.dao.AnalysisDao;
19 import com.alibaba.fastjson.JSONObject;
20 
21 
22 /**
23  * Servlet implementation class charts
24  */
25 @WebServlet("/charts")
26 public class charts extends HttpServlet {
27     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
28         // TODO Auto-generated method stub
29         req.setCharacterEncoding("utf-8");
30         String method = req.getParameter("method");
31         if ("zhu".equals(method)) {
32             Zhu(req, resp);
33         }
34         
35         
36     }   
37     /**
38      * @see HttpServlet#HttpServlet()
39      */
40     public charts() {
41         super();
42         // TODO Auto-generated constructor stub
43     }
44 
45     /**
46      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
47      */
48     private void Zhu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
49           // TODO Auto-generated method stub
50           //response.getWriter().append("Served at: ").append(request.getContextPath());
51           req.setCharacterEncoding("utf-8");
52           resp.setContentType("text/html;charset=utf-8");
53           HttpSession session=req.getSession();
54           PrintWriter out=resp.getWriter();
55         System.out.println("AAAAAAAAAAAAA");
56         //resp.sendRedirect(req.getContextPath() + "/right.jsp");
57         List<String> xAxisData = new ArrayList<String>();  
58         List<JSONObject> seriesList = new ArrayList< JSONObject>(); 
59         
60         List<AnalysisBean> beans=new ArrayList<AnalysisBean>();
61         beans=AnalysisDao.select_answer();
62         for(AnalysisBean n:beans)
63         {
64             String str=n.getName();
65             xAxisData.add(str);
66         }
67         List<Integer> list=new ArrayList<Integer>();
68         
69         for(AnalysisBean n:beans)
70         {
71             int nu=Integer.parseInt(n.getNum());
72             list.add(nu);
73         }
74         
75          Series series=new Series("回答问题机构","bar",list);
76          JSONObject job = new JSONObject();
77          job.put("name", series.getName());
78          job.put("type", series.getType());
79          job.put("data",series.getData());  
80          seriesList.add(job); 
81          
82          series=new Series("回答问题机构","line",list);
83          job = new JSONObject();
84          job.put("name", series.getName());
85          job.put("type", series.getType());
86          job.put("data",series.getData());  
87          seriesList.add(job); 
88          
89          JSONObject jsob = new JSONObject(); 
90          jsob.put("xAxis", xAxisData);  
91          jsob.put("series", seriesList); 
92          
93         resp.setCharacterEncoding("UTF-8");
94         System.out.println(jsob.toString());
95           //resp.sendRedirect(req.getContextPath() + "/admin/child/Child_11/1_Rcai.jsp");
96         resp.getWriter().write(jsob.toString());
97           }
    SERVLET
  • 相关阅读:
    IOS开发-cell的动态高度
    IOS开发-视频，音频，录音简单总结
    cocoapods的安装及注意事项
    CUICatalog: Invalid asset name supplied: (null) _configureCellForDisplay:forIndexPath
    IOS开发—数据库的使用
    IOS开发-键盘通知自定义键盘
    IOS开发-手势简单使用及手势不响应处理办法
    IOS开发-UITextField代理常用的方法总结
    Linux Shell 编程学习笔记
    Java的进程内缓存框架:EhCache
  • 原文地址：https://www.cnblogs.com/smartisn/p/12246918.html
Copyright © 2011-2022 走看看