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.實驗結果圖如下：