在web開發中,如果想做頁面局部刷新的功能,那麼使用ajax最合適不過了。在spring mvc逐漸替代struts框架的今天,掌握spring mvc和json的數據交互式很有必要的。
ajax與後臺的數據交互格式有好幾種,本文主要講解以ajax以json格式和key/value鍵值對的方式向後臺發送數據,返回的是json格式的數據,以便於前端對數據的解析。兩種格式的後臺處理過程如下。
兩者的區別是:如果使用的json格式,那麼在controller對應的方法參數加@RequestBody註解,這個註解能夠把json串轉爲javabean對象。如果是key/value格式,那麼不需要@RequestBody註解,因爲傳過來的鍵值對spring mvc自動裝配成bean。
1.現在來搭建實驗環境,在jsp頁面中,需要加載jquery庫,因爲jquery對ajax的封裝,很方便操作。這裏我直接用微軟的cdn了,只需要在jsp頁面的head標籤中引入jquery就行了。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
- 1
2.在jsp頁面創建一個button按鈕,並當我們點擊這個按鈕時,觸發ajax請求函數。
<button onclick="requestJson()">發送Json請求</button><br />
- 1
處理ajax請求的函數如下:
function requestJson() {
$.ajax({
type : "post",
url : "${pageContext.request.contextPath}/testJson/requestJson",
contentType : "application/json;charset=utf-8",
//數據格式是json串,傳進一個person
data : '{"userName" : "shizongger","gender" : "male"}',
success:function(data){
console.log("服務器處理後的用戶名是:" + data.userName);
console.log("服務器處理後的性別是:" + data.gender);
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
上訴參數的各自含義是:
type:http請求的方式,據說http請求方式有6種方式,但是一般開發中用的最多的就是post和get這兩種方式。
url:請求的url地址,就是我們要訪問的cotroller映射的地址。
contentType:這裏要特別注意這個問題,如果是key/value值,那麼這個請求的值應該是: “application/x-www-form-urlencoded/charset=utf-8“,而默認值就是這個值,可以不用寫。如果是json格式的話,應該是:”application/json;charset=utf-8“,這裏必須寫對。
3.引入spring mvc需要的jar包,主要是兩個jar包,分別是:jackson-core-asl-x.x.xx.jar和jackson-mapper-asl-x.x.xx.jar。如果你不是一個maven項目,那麼首先將jar包下載下來,然後把這兩個包放進lib文件夾。如果你是一個maven項目,那麼它的依賴文件如下:
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
4.在spring mvc的註解配置器中中加入messageConenters。
<mvc:annotation-driven />
5.寫controller的處理方法。
/**
*
* @param person RequestBody註解將json串轉爲javabean person
* @return 返回javabean person,ResponseBody將javabean轉爲json返回到客戶端
*/
@RequestMapping("/requestJson")
public @ResponseBody Person requestJson(@RequestBody Person p) {
System.out.println("json傳來的串是:" + p.getGender() + " " + p.getUserName() + " " + p.isAdalt());
p.setUserName(p.getUserName().toUpperCase());
return p;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
上述的Person javabean定義爲:
public class Person {
/*
* 姓名
*/
private String userName;
/**
* 性別
*/
private String gender;
/*
* 是否成年,測試json是否能夠傳遞boolean值
*/
private boolean adalt;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public boolean isAdalt() {
return adalt;
}
public void setAdalt(boolean adalt) {
this.adalt = adalt;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
將項目運行起來,在瀏覽器控制輸出結果如下:
服務器處理後的用戶名是:SHIZONGGER
服務器處理後的性別是:male
- 1
- 2
服務器後臺輸出結果如下:
json傳來的串是:male shizongger false
- 1
這裏我在服務器只做了一個處理,就是將前端傳遞過來的用戶名轉換爲大寫,再將其返回。
下面是處理key/value鍵值對的情形。
function responseJson() {
console.log("b");
$.ajax({
type : 'post',
url : '${pageContext.request.contextPath}/testJson/responseJson',
data : 'userName="JAVA程序員"&gender="男"&male="true"',
success : function(data) {
console.log("服務器處理後的用戶名是:" + data.userName);
console.log("服務器處理後的性別是:" + data.gender);
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
@RequestMapping("/responseJson")
public @ResponseBody Person responseJson(Person p) {
System.out.println("json傳來的串是:" + p.getGender() + " " + p.getUserName() + " " + p.isAdalt());
p.setUserName(p.getUserName().toUpperCase());
return p;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
兩者的區別是:
1,在ajax請求中,json需要些contentType,而key/value不需要。
2,在controller處理器中,json需求@RequestBody註解才能將json串轉爲person對象,而key/value不需要。
一般而言,key/value請求比json請求簡單,所以前者使用的較多,而controller返回給前端的參數格式,一般都是json。
如果你在搭建環境是出錯,可能有以下原因:
1.瀏覽器返回狀態嗎:415 Unsupported Media Type
原因是你可能忘記在配置文件里加入這句話:< mvc:annotation-driven />,或者jar包沒有引入進去,又或者,你的json格式數據寫錯了。
2.eclipse報錯:D:\JavaProgram\userysys-v2.0\target\m2e-wtp\web-resources\META-INF\MANIFEST.MF (系統找不到指定的路徑。)
解決辦法:點擊eclipse的project->clean->Clean all projects或者Clean projects below,或者必須選中你出錯的項目