最简单，小白易上手 ajax请求数据库信息，echarts页面显示，无需跳转servlet
Posted Smartisan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最简单，小白易上手 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>
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 }
以上是关于最简单，小白易上手 ajax请求数据库信息，echarts页面显示，无需跳转servlet的主要内容，如果未能解决你的问题，请参考以下文章
自然语言处理增强大法好！最易上手的 Augmentation Techniques有哪些？