javaweb中Gson、fastJson、JsonLib、jackson…提供了對json傳輸的支持
json核心知識回顧
1.json有兩種格式
（1）json對象：{key:value,key2:value2........}
(2)json數組 ：[value1,value2......]
2.json對象的解析方式 對象.key
json數組的解析方式 for循環遍歷
3.java對象轉換json
(1)bean或map 轉換成json對象
(2) list collection集合 轉換成json數組
一、向客戶端返回json
springMVC處理json的四個條件
* 1.導入jackson的jar包支持
* 2.在springMVC配置文件中開啟mvc注解驅動 <mvc:annotation-driven>
* 3.在處理ajax請求發方法上加上注解@RequestBody
* 4.將要轉換為json且相應到客戶端的數據作為該方法的返回值
package com.atguigu.test; import java.util.Collection; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.atguigu.dao.EmployeeDao; import com.atguigu.domain.Employee; /** * springMVC處理json的四個條件 * 1.導入jackson的jar包支持 * 2.在springMVC配置文件中開啟mvc注解驅動 <mvc:annotation-driven> * 3.在處理ajax請求發方法上加上注解@RequestBody * 4.將要轉換為json且相應到客戶端的數據作為該方法的返回值 * @ResponseBody * @author master * */ @Controller public class JsonController { @Autowired private EmployeeDao employeeDao; @RequestMapping("/testJson") @ResponseBody public Collection<Employee> testJson() { Collection<Employee> emps = employeeDao.getAll(); return emps; } }
二、接受服務器發送過來的json數據並以表格方式展示
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>testJson here</title> <link rel="stylesheet" href="${pageContext.servletContext.contextPath }/css/index_work.css"> <script type="text/javascript" src="${pageContext.servletContext.contextPath }/js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.ajax({ url:"testJson", type:"POST", dataType:"json", success:function(msg){ //方式一 /* var tb = "<table>"; tb +="<tr><th>id</th><th>lastName</th><th>email</th><th>gender</th><th>departmentName</th></tr>" for ( var i in msg) { var emp = msg[i]; tb +="<tr><td>"+emp.id+"</td><td>"+emp.lastName+"</td><td>"+emp.email+"</td><td>"+emp.gender+"</td><td>"+emp.department.id+"</td></tr>"; } tb +="</table>" $("body").append(tb); */ //方式二 $("body").append("<table></table>"); $("table").append("<tr><th>id</th><th>lastName</th><th>email</th><th>gender</th><th>departmentName</th></tr>"); for ( var i in msg) { var emp = msg[i]; $("table").append("<tr><td>"+emp.id+"</td><td>"+emp.lastName+"</td><td>"+emp.email+"</td><td>"+emp.gender+"</td><td>"+emp.department.id+"</td></tr>"); } //alert(msg); /* [ {"id":1001,"lastName":"E-AA","email":"aa@163.com","gender":1,"department":{"id":101,"departmentName":"D-AA"}}, {"id":1002,"lastName":"E-BB","email":"bb@163.com","gender":1,"department":{"id":102,"departmentName":"D-BB"}}, {"id":1003,"lastName":"E-CC","email":"cc@163.com","gender":0,"department":{"id":103,"departmentName":"D-CC"}}, {"id":1004,"lastName":"E-DD","email":"dd@163.com","gender":0,"department":{"id":104,"departmentName":"D-DD"}}, {"id":1005,"lastName":"E-EE","email":"ee@163.com","gender":1,"department":{"id":105,"departmentName":"D-EE"}} ] */ /* for ( var i in msg) { var emp = msg[i]; alert("lastName="+emp.lastName+"email="+emp.email+"department="+emp.department+"departmentName="+emp.department.departmentName) } */ } }); }); }); </script> </head> <body> <a href = "testJson">testJson</a> <br/> <br/> <br/> <input id="btn" type="button" value="測試Ajax"> </body> </html>
展示結果
