通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法

所做项目中用到POST提交JSON类型的字符串数据给controller，搜了一些博客，转载一篇还不错的博客：

js代码：

[javascript]  view plain  copy

1. function postSimpleData() {  
2.         $.ajax({  
3.             type: "POST",  
4.             url: "Service/SimpleData",  
5.             contentType: "application/json", //必须有  
6.             dataType: "json", //表示返回值类型，不必须  
7.             data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' }),  //相当于 //data: "{'str1':'foovalue', 'str2':'barvalue'}",  
8.             success: function (jsonResult) {  
9.                 alert(jsonResult);  
10.             }  
11.         });  
12.     }  
13.     function login(){  
14.     $.ajax({  
15.         url: "Service/login",  
16.         type: "POST",  
17.         contentType: "application/json",  
18.         dataType: "json",  
19.         data: JSON.stringify({  
20.             MachineIP:"127.0.0.1",  
21.             AppTag:"4",  
22.             RequestInfo:{  
23.                 StaffCode:"",  
24.                 Password:"",  
25.                 StaffCard:"01411"  
26.             },  
27.         }),  
28.         async: true,  
29.         success: function(data) {  
30.             var ss = JSON.stringify(data);  
31.             $("#result").val(ss);  
32.             console.log(ss);  
33.         }  
34.     });  
35.     }  
36.     function postEmployees() {  
37.         $.ajax({  
38.             type: "POST",  
39.             url: "Service/Employees",  
40.             contentType: "application/json",  
41.             dataType: "json",  
42.             data: JSON.stringify({                "Employees": [  
43.                                     { "firstName": "Bill", "lastName": "Gates" },  
44.                                     { "firstName": "George", "lastName": "Bush" },  
45.                                     { "firstName": "Thomas", "lastName": "Carter" }  
46.                                  ]  
47.   
48.             }),  
49.             success: function (jsonResult) {  
50.                 alert(jsonResult);  
51.             }  
52.         });  
53.     }  

JAVA  Controller代码：

[java]  view plain  copy

1. @RequestMapping(value = "/SimpleData", method = RequestMethod.POST)  
2.     @ResponseBody  
3.     public ActionResult SimpleData(string foo, string bar) {  
4.         return Json("SimpleData", JsonRequestBehavior.AllowGet);  
5.     }  
6.   
7.     @RequestMapping(value = "/login", method = RequestMethod.POST)  
8.     @ResponseBody  
9.     public ResponseProtocolMap login(@RequestBody JSONObject requestJson, HttpServletRequest request) {  
10.         ResponseProtocolMap responseProtocolMap = null;  
11.         String machineIP = RequestJsonUtils.getMachineIP(requestJson);  
12.         String appTag = RequestJsonUtils.getAppTag(requestJson);  
13.         JSONObject requestInfo = RequestJsonUtils.getRequestInfo(requestJson);  
14.         if (requestInfo == null) {  
15.             responseProtocolMap = new ResponseProtocolMap("-1", "参数错误");  
16.         } else {  
17.             String staffCode = RequestJsonUtils.getValueByKey(requestInfo, "StaffCode");  
18.             String password = RequestJsonUtils.getValueByKey(requestInfo, "Password");  
19.             String staffCard = RequestJsonUtils.getValueByKey(requestInfo, "StaffCard");  
20.             responseProtocolMap = sysLoginService.login(staffCode, password, staffCard, appTag, request);  
21.         }  
22.         return responseProtocolMap;  
23.     }  
24.   
25.     @RequestMapping(value = "/Employees", method = RequestMethod.POST)  
26.     @ResponseBody  
27.     public ActionResult Employees(List<Employee> Employees) {  
28.         return Json("Employees", JsonRequestBehavior.AllowGet);  
29.     }  

[java]  view plain  copy

1. public class Employee{  
2.     public string FirstName { get; set; }  
3.     public string LastName { get; set; }  
4. }  

值得注意的有2点：

1）Ajax 选项中

[javascript]  view plain  copy

1. contentType: "application/json"  

 这一条必须写，表明request的数据类型是json。

而

[javascript]  view plain  copy

1. dataType: "json"  

这一条表示返回值的类型，不是必须的，且依据返回值类型而定。

2）选项中

[javascript]  view plain  copy

1. data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' })  

 很多时候我们将数据写作：

[javascript]  view plain  copy

1. { 'foo': 'foovalue', 'bar': 'barvalue' }  

这样会导致错误，因为js会默认将这个json对象放到表单数据中，故而导致controller接收不到。

有两种办法处理：第一种方式是用JSON.stringify()函数，其中JSON被Ecmascript5定义为全局对象。

第二种方式是直接用双引号包裹起来，比如data: "{'str1':'foovalue', 'str2':'barvalue'}"。

转载地址：http://blog.csdn.net/lsy0903/article/details/53199395