簡介
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。由於其簡單易用，目前常用來通過AJAX與后台進行交互。springMVC對於接收、發送JSON數據也提供了支持，並能方便的將JSON數據與對象進行相互轉換。
環境准備
由於springMVC對JSON的支持是基於jackson的，因此需引入jar包
配置pom.xml
<!-- Jackson -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.4</version>
</dependency>
對springMVC的處理器適配器注入JSON轉換器
<!-- 處理器適配器配置 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<!-- 配置jackson轉換器 -->
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
</list>
</property>
</bean>
若使用的是MVC注解驅動，則無需再單獨配置
<mvc:annotation-driven></mvc:annotation-driven>
測試代碼
@RequestBody注解可將請求的JSON數據自動轉換為Controller方法的形參
@ResponseBody注解可將返回的對象轉換成JSON數據輸出
@RequestMapping("/queryAccount.action")
@ResponseBody
//@RequestBody 前提：請求ContentType必須是application/json，不能是application/x-www-form-urlencoded或其它
public Account queryAccount(@RequestBody User user) throws Exception {
System.out.println(user.getUsername());
System.out.println(user.getPassword());
Account account = new Account();
account.setId("123");
account.setName("nlskyfree");
account.setMoney("3423.43");
return account;
}
JSP頁面，使用原生AJAX發出請求
需引入json2.js進行js上的JSON數據與對象的轉換
<html>
<script type="text/javascript" src="/springMVC/json2.js"></script>
<script type="text/javascript">
var xmlHttp;
function updateData() {
//4：響應已完成；您可以獲取並使用服務器的響應了。
if(xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
alert(response);
var obj = JSON.parse(response);
document.getElementById(3).value = obj.id;
document.getElementById(4).value = obj.name;
document.getElementById(5).value = obj.money;
}
}
//AJAX提交數據
function submit() {
//獲得提交數據
var username = document.getElementById(1).value;
var password = document.getElementById(2).value;
//發出AJAX請求
xmlHttp = getXMLHttpRequest();
var url = "/springMVC/queryAccount.action";
//開啟連接
xmlHttp.open("POST", url, true);
//返回函數
xmlHttp.onreadystatechange = updateData;
//設置數據為JSON格式
xmlHttp.setRequestHeader("Content-Type", "application/json");
var data = {"username": username, "password" : password};
//發送請求
xmlHttp.send(JSON.stringify(data));
}
//兼容各瀏覽器獲取XMLHttpRequest
function getXMLHttpRequest() {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
</script>
<body>
<h2>Hello World!</h2>
用戶名：<input id="1" name="username" type="text"/>
密碼：<input id="2" name="password" type="password"/><br/>
<br/>
<input type="button" value="查 詢" onclick="submit();"/><br/>
<br/>
賬戶編號<input id="3" type="text"/><br/>
賬戶名稱<input id="4" type="text"/><br/>
賬戶金額<input id="5" type="text"/>
</body>
</html>
結果：