1. 程式人生 > >通過Ajax進行POST提交JSON型別的資料到SpringMVC Controller的方法

通過Ajax進行POST提交JSON型別的資料到SpringMVC Controller的方法

現在在做的專案用到了SpringMVC框架,需要從前端angular接收請求的JSON資料,為了測試方便,所以直接先用AJAX進行測試,不過剛開始用平時用的ajax方法,提交請求會出現415或者400錯誤,經過研究,終於可以了,現在做個總結。

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.             success: function (jsonResult) {  
  49.                 alert(jsonResult);  
  50.             }  
  51.         });  
  52.     }  

JAVA Controller程式碼:
  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.     @RequestMapping(value = "/login", method = RequestMethod.POST)  
  7.     @ResponseBody
  8.     public ResponseProtocolMap login(@RequestBody JSONObject requestJson, HttpServletRequest request) {  
  9.         ResponseProtocolMap responseProtocolMap = null;  
  10.         String machineIP = RequestJsonUtils.getMachineIP(requestJson);  
  11.         String appTag = RequestJsonUtils.getAppTag(requestJson);  
  12.         JSONObject requestInfo = RequestJsonUtils.getRequestInfo(requestJson);  
  13.         if (requestInfo == null) {  
  14.             responseProtocolMap = new ResponseProtocolMap("-1""引數錯誤");  
  15.         } else {  
  16.             String staffCode = RequestJsonUtils.getValueByKey(requestInfo, "StaffCode");  
  17.             String password = RequestJsonUtils.getValueByKey(requestInfo, "Password");  
  18.             String staffCard = RequestJsonUtils.getValueByKey(requestInfo, "StaffCard");  
  19.             responseProtocolMap = sysLoginService.login(staffCode, password, staffCard, appTag, request);  
  20.         }  
  21.         return responseProtocolMap;  
  22.     }  
  23.     @RequestMapping(value = "/Employees", method = RequestMethod.POST)  
  24.     @ResponseBody
  25.     public ActionResult Employees(List<Employee> Employees) {  
  26.         return Json("Employees", JsonRequestBehavior.AllowGet);  
  27.     }  

  1. publicclass 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'}"。