Content Table
2016-04-17

SpringMVC 处理 Ajax 映射

SpringMVC 返回 Json 数据给前端是件很简单的事，但是 SpringMVC 的 Controller 接收前端 Ajax传来的 Json 数据却不那么容易，前端和后端都要很小心，有一点不对就会出错，需要分为 2 种情况处理:

  • GET
  • PUT, POST, DELETE

GET

一、浏览器端 Ajax 请求

  • type 为 GET
  • contentType 为 application/json
  • data 是 JSON 对象，不能使用 JSON.stringify(data) 序列化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function() {
    $.ajax({
        url:  'ajax-test',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json',
        data: {age: 10} //JSON.stringify({age: 10})
    })
    .done(function(result) {
        console.log("success");
        console.log(result);
    })
    .fail(function(error) {
        console.log("error");
        console.log(error);
    });
});
</script>

二、服务器端

  • method 为 RequestMethod.GET
  • 使用 @RequestParam 接收参数
1
2
3
4
5
6
@RequestMapping(value="ajax-test", method= RequestMethod.GET)
@ResponseBody
public String ajaxTest(@RequestParam int age) {
    System.out.println("==> age: " + age);
    return "{\"success\": true}";
}

服务器返回的数据需要注意，例如 return "{success: true}" 或者 return success，返回的不是一个 JSON 对象的格式，浏览器端会调用 fail()，不过这时看 error 的 status 却是 200。正确的 JSON 格式为 "{\"success\": true}"，属性名需要用双引号括起来。

PUT, POST, DELETE

一、浏览器端 AJAX 请求

  • type 为 PUT, POST 或 DELETE
  • contentType 为 application/json
  • data 不是 JSON 对象，需要使用 JSON.stringify(data) 序列化一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function() {
    $.ajax({
        url:  'ajax-test',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({age: 10})
    })
    .done(function(result) {
        console.log("success");
        console.log(result);
    })
    .fail(function(error) {
        console.log("error");
        console.log(error);
    });
});
</script>

二、服务器端

  • method 为 RequestMethod.PUT (POST, DELETE)
  • 使用 @RequestBody 接收参数
    • 如果只想取某一个参数，可以使用 Map: @RequestBody Map map
    • 把 Json 数据映射为一个 Java Bean: @RequestBody Topic topic
1
2
3
4
5
6
@RequestMapping(value="ajax-test", method= RequestMethod.POST)
@ResponseBody
public String ajaxGet(@RequestBody Map map) {
    System.out.println("==> age: " + map);
    return "{\"success\": true}";
}

参考

以前，一直以为在 SpringMVC 环境中，@RequestBody 接收的是一个 Json 对象，一直在调试代码都没有成功，后来发现，其实 @RequestBody 接收的是一个 Json 对象的字符串，而不是一个 Json 对象。然而在 ajax 请求往往传的都是 Json 对象，后来发现用 JSON.stringify(data) 的方式就能将对象变成字符串。同时 ajax 请求的时候也要指定 dataType: “json”, contentType: “application/json” 这样就可以轻易的将一个对象或者 List 传到 Java 端，使用 @RequestBody 即可绑定对象或者 List。