1. The code for sending data in json format on the server side is as follows (this refers to the situation in the servlet class ):
Import java. io. IOException; import java. io. printWriter; import javax. servlet. servletException; import javax. servlet. http. httpServlet; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse; public class repjson extends HttpServlet {public repjson () {super ();} public void destroy () {super. destroy (); // Just puts "destroy" string in log // Put your code here} // main method, return the json data public void doGet (HttpServletRequest request, httpServletResponse response) throws ServletException, IOException {response. setContentType ("text/html"); PrintWriter out = response. getWriter (); String title = "HelloJson"; String a = "J"; String B = "S"; String c = "O"; String d = "N "; string xData = "[" + "\" "+ a +" \ "" + "," + "\" "+ B +" \ "" + ", "+" \ "" + c + "\" "+", "+" \ "" + d + "\" "+"] "; string yData = "[" + 4 + "," + 3 + "," + 2 + "," + 1 + "]"; out. println ("{" + "\" title \ ": \" "+ title +" \ "" + "," + "\" xData \": "+ xData +", "+" \ "yData \": "+ yData +"} ");} public void init () throws ServletException {// Put your code here }}
2. The client receives json data and uses a histogram to display the Code as follows:
<% @ Page Language = "Java" pageencoding = "UTF-8" %> <% @ page contenttype = "text/html; charset = UTF-8 "%> <SCRIPT type =" text/JavaScript "src =" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js "> </SCRIPT> <SCRIPT src =" http://code.highcharts.com/modules/exporting.js "> </SCRIPT> <SCRIPT SRC = "http://code.highcharts.com/highcharts.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {var Options = {chart: {renderto: 'Container', type: 'column'}, Title: {text: ''}, credits: {enabled: false}, exporting: {enabled: true}, plotoptions: {Column: {pointpadding: 0.2, borderwidth: 0 }}, tooltip: {formatter: function () {return ''+ this. X + ':' + this. Y + 'sub' ;}}, Legend: {enabled: false}, xaxis: {categories: [], labels: {rotation:-45, align: 'right ', style: {fontsize: '13px ', fontfamily: 'verdana, sans-serif' }}, yaxis: {min: 0, Title: {text:' quantity (times) '}}, series: [{name: "", data: []}; $. get ('servlet/repjson', function (JSON) {JSON = eval ("(" + JSON + ")"); options. title. TEXT = JSON. title; $. each (JSON. xdata, function (Key, value) {options. xaxis. categories. push (value) ;}); $. each (JSON. ydata, function (Key, value) {options. series [0]. data. push (value) ;}); var chart = new highcharts. chart (options) ;}); </SCRIPT> <Div id = "Container" style = "Min-width: 720px; Height: 400px; margin: 0 auto "> </div>
3. The experiment results are shown as follows: