SpringMVC中前台ajax传递数据，后台controller接收为null问题解决

程序员文章站 2022-07-14 18:37:43

...

前言：

开始做SpringMVC以及整合ajax发送请求的时候，我们经常会踩一些坑，说实话到现在我都没有吧ajax中的各个参数理解透彻。。。今天写一个关于contentType参数吧，工作中经常会看见这个参数，也是本人踩了很多次坑

问题描述及解决：

首先，在jq的ajax中，contentType指定的是浏览器将发送什么样的编码格式，例如：
text/html：HTML格式
text/plain：纯文本格式（json/xml/html等）
text/xml：xml格式
image/jpeg：jpg图片格式
application/json：json数据格式
…（还有的不一一列举了）
在开发中我们经常遇到的问题就是在ajax中加入contentType和不加contentType有什么区别，比较常见的就是application/json。

1.在不指定contentType时，默认为application/x-www-form-urlencoded类型，此时ajax中的data对应的应该是json对象，application/x-www-form-urlencoded类型跟表单默认提交的类型一致，而且他能够配合ajax中的另一个参数processData（默认为true）将data对象自动的转化为查询字符串的形式（key1=value1&key2=value2）

下面开始演示：

前端页面：

<div class="container">
    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Username</label>
        <input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
        <br>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="text" id="password" name="password" class="form-control" placeholder="Password" required>
        <br>
    </form>
    <button class="btn btn-lg btn-primary btn-block" onclick="submitForm();">提交</button>
</div>

function submitForm() {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url: "/test/test",
            type: "post",
            data:{
                "username":username,
                "password":password
            },
            dataType:"json",
            success: function (data) {
                alert(data.username);
            }
        })
    }

后台controller

	@ResponseBody
    @RequestMapping(value = "/test")
    public String sayHello(User user, String username,String password){
        System.out.println(username+" and "+password);
        System.out.println("username:"+user.getUsername()+" | password:"+user.getPassword());
        String result = JSONObject.toJSONString(user);
        return result;
    }

在页面输入username和password后，ajax回调成功！
SpringMVC中前台ajax传递数据，后台controller接收为null问题解决

控制台打印数据无误！
SpringMVC中前台ajax传递数据，后台controller接收为null问题解决

2.当在ajax中加入contentType:"application/json"的时候，此时如果不做修改的话，后台接收必然为null，为什么呢？
这是因为在指定了contentType:"application/json"后，data就必须为json字符串了，而之前我们的data还是一个json对象，所以需要转为json字符串，修改ajax如下：

function submitForm() {
        var username = $("#username").val();
        var password = $("#password").val();
        var param = {username:username,password:password};
        console.log(username);
        $.ajax({
            url: "/test/test",
            type: "post",
            data: JSON.stringify(param),
            contentType:"application/json",
            dataType:"json",
            success: function (data) {
                alert(data.username);
            }
        })
    }

此时因为前台ajax传递给后台controller的数据是json字符串，所以后台也应该做响应的修改，这个时候就可以用到@RequestBody注解了，这个注解会帮你把前台传递的json字符串中的数据提取出来并绑定到对象中：

	@ResponseBody
    @RequestMapping(value = "/test")
    public String sayHello(@RequestBody User user){
        System.out.println("username:"+user.getUsername()+" | password:"+user.getPassword());
        String result = JSONObject.toJSONString(user);
        return result;
    }