JSON是一種輕量的統一的資料交換格式，特別適合在JavaScript中使用，JSON資料可以被輕鬆的轉換為JS對象，在JS使用越來越廣泛的今天，要成為一名優秀的web開發工程師，學好它勢在必行，它也確實能為你提供實在的便利。
下面我們以一個jsp + servlet的demo來簡單瞭解JSON用法。
源碼下載地址
一、準備工作
項目結構圖：
jar包下載：
免費下載連結
二、Person類（Model）
沒有什麼特別的，私人屬性與它們的get()、set()方法。
public class Person {private int id;private String name;private String pwd;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}}
三、servlet類（Controller）
當然，這個Servlet必須在web.xml中註冊與配置映射。
public class Json extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml;character=utf-8");response.setHeader("Cache-Control", "no-cache");try {//建立Person對象，儲存資料，如果有資料庫的話，此處資料應該為從資料庫中取出Person p = new Person();p.setName("first");p.setId(1);p.setPwd("123456");Person p1 = new Person();p1.setName("second");p1.setId(2);p1.setPwd("666888");//將Person對象裝入集合List<Person> list = new ArrayList<Person>();list.add(p);list.add(p1);try {//建立JsonArray對象，JSONArray則是[]包裹起來的一個數組(Array)，此處調用方法將對象集合裝入JSONArray json = JSONArray.fromObject(list);//JSONObject是一個{}包裹起來的一個對象(Object)，此處希望以對象為單位進行操作，所以建立JSONObject對象JSONObject jb = new JSONObject();//將jsonArray對象裝入jb.put("person", json);//輸出Json資料，它就是一種特殊格式的字串response.getWriter().write(jb.toString());/*此處可以用另一種方式將資料裝入Json,同樣可以,只是前台接受的是JSONArray對象，是[]包裹起來的一個數組(Array) *JSONArray jsonArray = new JSONArray(); *JSONObject jb = new JSONObject(); *jb.put("person", json); *jsonArray.add(jb); *response.getWriter().write(jsonArray.toString()); */} catch (IOException e) {e.printStackTrace();}} catch (Exception e) {e.printStackTrace();}}}
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <servlet-name>Json</servlet-name> <servlet-class>com.jsonTest.servlet.Json</servlet-class> </servlet> <servlet-mapping> <servlet-name>Json</servlet-name> <url-pattern>/json</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>四、JSP(View)
接收後台通過伺服器發送的JSON資料，然後用JS的eval方法解析JSON將資料轉化為JS對象。
關於AJAX與伺服器端通訊，請參看另一篇部落格AJAX初識與XMLHttpRequest介紹。
關於eval解析JSON，請參看另一篇部落格eval解析JSON注意點。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><input type="button" onclick="validate()" value="請求並解析JSON"><div id="div"></div><table border="1" style="width:300px;height:200px;" id="table"><tr id="tr" border="1"><td>1</td><td>1</td><td>1</td></tr><tr border="1"><td>1</td><td>1</td><td>1</td></tr></table><script type="text/javascript"> function validate(){ var div=document.getElementById("div"); var xmlhttp; var table=document.getElementById('table');if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {xmlhttp = new ActiveObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var x = xmlhttp.responseTextdiv.innerHTML = x;var sd = eval("(" + x + ")");var arr = new Array();var i = 0;for ( var a in sd.person) {//擷取有幾個personvar count = 0;//計算person屬性值的個數i++;for ( var item in sd.person[a]) {count++;var p = sd.person[a][item];//得到屬性值的內容table.rows[i - 1].cells[count - 1].innerHTML = p;//把內容填向table表格}}}}var url = "json";xmlhttp.open("POST", url, true);xmlhttp.send();}</script></body></body></html>
五、執行效果
啟動Tomcat伺服器，通過瀏覽器URL訪問項目，http://localhost:8080/jsonTest/，就可以看到如下效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
