JSON—接收服務器端傳來的數據

1.服務器端傳送json格式的數據代碼如下（這裏指在servlet類中的情況）：

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
	}
        //主方法，通過doGet的response回傳json數據
	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.客戶端接收json數據並以直方圖顯示代碼如下：

<%@ 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 + ' 次';
				}
			},

			legend : {
				enabled : false
			},

			xAxis : {
				categories : [],
				labels : {
					rotation : -45,
					align : 'right',
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			},
			yAxis : {
				min : 0,
				title : {
					text : '數量(次)'
				}
			},
			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.實驗結果圖如下：