ajax post json到服务器的小细节

1.服务器端，spring mvc 代码：

@RequestMapping(value = "/save")
@ResponseBody
public BaseModelResult<Long> update(@RequestBody User param) {

....

}

通过标记@RequestBody 会将请求的json数据自动转为对象，实际上如果web页面通过form表单提交的话，直接update(User param)这种方式也能自动转，不太喜欢这种json方式，有时有点坑。

2.Web页面代码

$.ajax({
            type: "POST",
            url: "save.do",
            contentType:"application/json",
            data: JSON.stringify({name:$("#userName").val(),
                password:$("#password").val()
            }),
            dataType: "json",
            success: function (result) {
                console.log(result);                
            },
            error: function (message) {
                console.log(message);
            }
 });

注意标红的地方：
（1）contentType 默认为表单提交，也就是application/x-www-form-urlencoded方式，此处需要改为json方式

（2）data传入数据，此处需要注意需要转为字符串，不能传对象，感觉挺坑，此处应该与一般的post/get方式一致，都应为对象才好

---

2021.7.3

json与表单提交方式相比能传入更复杂的对象，其实使用来讲更加灵活一些：

比如下面传入数组方式：

Java代码

/**
* @param userList ：接收页面单个：POJO List。必须加 @RequestBody 注解
* @return
*/
@PostMapping("save3")
public String save3(@RequestBody List<User> userList) {
for (User user : userList) {
logger.info("save3--->" + user);
}
return new Date() + "传输完毕：" + userList;

　　

 

 Javascript:

//后台是 List<User>，则前台使用数组([])表示 List，使用 json 对象表示 User 对象
var data = [];
for (var i = 0; i < 3; i++) {
    var user = {};//每一个 json 对象相当于后台的 User 对象，因为都是 key-value 格式。
    user.uId = (i + 1);//key 值必须与后台 POJO 属性一致。value 的类型必须与后台数据类型一致。
    user.uName = "huaAn_" + (i + 1);
    data.push(user);//将 json 对象添加到数组中
}
$.ajax({
    //默认传输的内容类型为 key-value 型,后台使用数组、List 接收参数时,
    // headers 中必须指定内容类型为 json 类型，否则会报415错误
    headers: {
        'Content-Type': 'application/json'
    },
    type: "post",
    url: "http://localhost:8080/user/save3",
    //指定 json 类型后，传输的数据理所当然应该是 json 格式。
    data: JSON.stringify(data),
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
        console.log("ERROR:" + JSON.stringify(data));
    }