JavaWeb开发$.ajax如何向后台传输数据

转载：https://blog.youkuaiyun.com/qq_30051139/article/details/52936618

在Web开发中，前台和后台的数据交互是十分频繁的， 而JQuery对Ajax进行了封装，使得前台向后台发送数据变得十分简单。

假如后台有一个Java类User，来接收并封装数据

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

• 1
• 2
• 3
• 4
• 5

---

一、简单的数据格式

---

$.ajax发送数据的几种形式

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

//2 html页面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 简单的js对象
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
    } 
})

• 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
• 41
• 42
• 43
• 44
• 45

针对以上方式，后台数据的获取（SpringMvc框架）

@RequestMapping(value = "/testAjax")
public class UserController{
    // 1 将User放到参数中，框架进行封装
    @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");
    }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

---

二、复杂的数据格式

---

复杂的数据一般采用JSON格式来传输，并且Java对JSON格式的数据也都有很好的支持，如JSON-lib的JSONArray和JSONObject、jackson等技术。 
注意： 前后台传输的JSON数据一般是JSON对象序列化的字符串，而不是直接传递JSON对象。

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

• 1
• 2
• 3
• 4
• 5
• 6

//1 将JSON字符串作为value值，后台借助JSON解析工具

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

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

//2 结合SpringMvc的@RequestBody，@RequestBody需要把所有请求参数作为json解析,不能包含key=value这样的写法在请求url中,可以轻易的将一个对象或者数组传到Java端，使用@RequestBody即可绑定到对象或者List/数组
//(1)对象
var user = {
    id:1,
    name:"zhangxiaofan",
    sex:"male"
}
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",  //需要设置contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(user) ,
    success:function(data){  
        //TODO
    } 
})

//后台
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody User user) {

    }
//(2)数组
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",  //需要设置contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(users) ,
    success:function(data){  
        //TODO
    } 
})   

//后台
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody List<User> user) {
    //上面也可以将List<User>改为User[]数组
    }