1. 程式人生 > >SpringBoot專案開發(二十三):Ajax Post資料到控制器方法,引數自動轉換為物件

SpringBoot專案開發(二十三):Ajax Post資料到控制器方法,引數自動轉換為物件

往往有這麼個需求,在新增使用者時,頁面以 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字串資料,已經自動轉換為物件了
在這裡插入圖片描述