SpringBoot專案開發(二十三):Ajax Post資料到控制器方法,引數自動轉換為物件
阿新 • • 發佈:2018-11-09
往往有這麼個需求,在新增使用者時,頁面以 ajax 方式把 user 物件資料提交到後臺控制器上,
控制器方法中的引數以物件形式進行接收,這時就需要把json字串自動轉換為物件
在SpringBoot或SpringMvc中,有@ResponseBody 、@RequestBody 兩個註解
- @ResponseBody 註解是把資料以 json字串的方式傳給客戶端(或通過produces自定義為其他格式)
- @RequestBody 註解是把客戶端傳來的字串資料轉換為物件,但是需要 HttpMessageConverter 訊息轉換器
通過繼承 WebMvcConfigurationSupport 類,重寫configureMessageConverters方法,在專案中引用 fastjson庫,它有一個FastJsonHttpMessageConverter的類,實現了HttpMessageConverter訊息轉換,我們只要設定支援轉換那些型別即可,設定如下:
@Configuration public class CustomeInterceptor extends WebMvcConfigurationSupport { //UTF-8 格式的資料 @Override protected void configureMessageConverters(List<HttpMessageConverter<?>> converters) { //建立fastJson訊息轉換器 FastJsonHttpMessageConverter fastConverter = new FastJsonHttpMessageConverter(); List<MediaType> supportedMediaTypes = new ArrayList<>(); supportedMediaTypes.add(MediaType.APPLICATION_JSON); supportedMediaTypes.add(MediaType.APPLICATION_JSON_UTF8); supportedMediaTypes.add(MediaType.APPLICATION_ATOM_XML); supportedMediaTypes.add(MediaType.APPLICATION_FORM_URLENCODED); supportedMediaTypes.add(MediaType.APPLICATION_OCTET_STREAM); supportedMediaTypes.add(MediaType.APPLICATION_RSS_XML); supportedMediaTypes.add(MediaType.APPLICATION_XHTML_XML); supportedMediaTypes.add(MediaType.APPLICATION_XML); supportedMediaTypes.add(MediaType.TEXT_HTML); supportedMediaTypes.add(MediaType.TEXT_PLAIN); supportedMediaTypes.add(MediaType.TEXT_XML); fastConverter.setSupportedMediaTypes(supportedMediaTypes); converters.add(fastConverter); } }
ajax提交字串資料,contentType: ‘application/json’
<script type="text/javascript" th:inline="javascript"> function saveMenu() { var data = JSON.stringify({id: "1",pId : "root",name:"選單"}) $.ajax({ type : "post", url : "/saveMenu", data : data, contentType: 'application/json', success : function (result) { console.log(result); } }) } </script>
控制器接收,consumes = “application/json”
@RequestMapping(value = "/saveMenu" , method = RequestMethod.POST , consumes = "application/json")
@ResponseBody
public String saveMenu(@RequestBody Tree tree){
System.out.println("tree:" + JSON.toJSONString(tree));
return "success";
}
method 表示接收 POST方式的請求
consumes="application/json"表示只處理請求頭中Content-Type為application/json的請求
produces=“application/json” 表示向客戶端返回Content-Type為application/json的資料
看一下調式效果,可以看出物件中的值,ajax過來的json字串資料,已經自動轉換為物件了