JavaWeb開發(fā)$.ajax如何向后臺(tái)傳輸數(shù)據(jù)

在Web開發(fā)中，前臺(tái)和后臺(tái)的數(shù)據(jù)交互是十分頻繁的， 而JQuery對(duì)Ajax進(jìn)行了封裝，使得前臺(tái)向后臺(tái)發(fā)送數(shù)據(jù)變得十分簡(jiǎn)單。

假如后臺(tái)有一個(gè)Java類User，來接收并封裝數(shù)據(jù)

public class User{
    private Interger id;
    private String name;
    private String sex;
}

$.ajax發(fā)送數(shù)據(jù)的幾種形式

//1 直接在url中傳遞
$.ajax({
    type: "POST",
    url: "/testAjax/addUser?id=1&name=zhangxiaofan&sex=male",
    success:function(data){  
        //TODO
    } 
})

//2 html頁(yè)面from表單序列化
var formData = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "/testAjax/addUser",
    data: formData,
    success:function(data){  
        //TODO
    } 
})

//3 拼接data字符串
var formData = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "/testAjax/addUser",
    data: "id=1&name=zhangxiaofan&sex=male",
    success:function(data){  
        //TODO
    } 
})

//4 簡(jiǎn)單的js對(duì)象
var userData = {
    id:1,
    name:zhangxiaofan,
    sex:male
}
$.ajax({
    type: "POST",
    url: "/testAjax/addUser",
    data: userData,     //或者data:{id:1,name:zhangxiaofan,sex:male}
    success:function(data){  
        //TODO
    } 
})

針對(duì)以上方式，后臺(tái)數(shù)據(jù)的獲?。⊿pringMvc框架）

@RequestMapping(value = "/testAjax")
public class UserController{
    // 1 將User放到參數(shù)中，框架進(jìn)行封裝
    @RequestMapping(value = "/addUser")
    public String addUser(User user) {
        //TODO
    }

    // 2 自己獲取
    @RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request) {
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String sex= request.getParameter("sex");
    }

}

復(fù)雜的數(shù)據(jù)一般采用JSON格式來傳輸，并且Java對(duì)JSON格式的數(shù)據(jù)也都有很好的支持，如JSON-lib的JSONArray和JSONObject、jackson等技術(shù)。?
注意：?前后臺(tái)傳輸?shù)腏SON數(shù)據(jù)一般是JSON對(duì)象序列化的字符串，而不是直接傳遞JSON對(duì)象。

//1 JSON對(duì)象
var user = {id:1,name:"zhangxiaofan",sex:"male"};
//2 自己拼接JSON字符串
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
//3 JSON.stringify(data) JS方法序列化JSON對(duì)象
var userStr = JSON.stringify(user);

//1 將JSON字符串作為value值，后臺(tái)借助JSON解析工具

var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';

$.ajax({
    type: "POST",
    url: "/testAjax/addUser",
    data: "user="+userStr ,
    success:function(data){  
        //TODO
    } 
})
//后臺(tái)代碼
String json = request.getParameter("link");
JSONObject j = JSONObject.fromObject(json);
System.out.println(j.get("linkId"));

//2 結(jié)合SpringMvc的@RequestBody，@RequestBody需要把所有請(qǐng)求參數(shù)作為json解析,不能包含key=value這樣的寫法在請(qǐng)求url中,可以輕易的將一個(gè)對(duì)象或者數(shù)組傳到Java端，使用@RequestBody即可綁定到對(duì)象或者List/數(shù)組
//(1)對(duì)象
var user = {
    id:1,
    name:"zhangxiaofan",
    sex:"male"
}
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",  //需要設(shè)置contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(user) ,
    success:function(data){  
        //TODO
    } 
})

//后臺(tái)
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody User user) {

    }
//(2)數(shù)組
var users=[];  
var user1={id:1,name:tom,sex:cat};  
var user2={id:2,name:tom2,sex:cat};  
users.push(user1);  
users.push(user2);  
 $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",  //需要設(shè)置contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(users) ,
    success:function(data){  
        //TODO
    } 
})   

//后臺(tái)
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody List user) {
    //上面也可以將List改為User[]數(shù)組
    }