Spring mvc前后端数据交互（form表单和json数据）

蔚落 2022-05-12 04:30 230阅读 0赞

`ajax`异步提交请求常用的`contentType`有两种：`contentType:application/x-www-form-urlencoded` `contentType:application/json`，如何使用`springmvc`处理请求数据呢？

首先，我们来看一下`js`对象的两种数据格式：

*  普通`js`对象，**对象属性名不使用引号标注**

var baseJob = {
       jobName:$("#jobName").val(),
       jobGroupName:$("#jobGroup").val(),
       triggerName:$("#triggerName").val(),
       triggerGroupName:$("#triggerGroup").val(),
       cronExpression:$("#cronExpression").val(),
       description:$("#description").val()
    }

*  符合`json`串的`js`对象，**对象属性名必须用引号标注**

var baseJob = {
        "jobName":$("#jobName").val(),
        "jobGroupName":$("#jobGroup").val(),
        "triggerName":$("#triggerName").val(),
        "triggerGroupName":$("#triggerGroup").val(),
        "cronExpression":$("#cronExpression").val(),
        "description":$("#description").val()
    }

对于上面两种`js`对象，在指定`contentType`时，需要关注一下`ajax`提交数据的格式和后端的接收方式

1.  `contentType:application/x-www-form-urlencoded`
    
    `ajax`不指定`contentType`时，默认使用的请求格式，也就是`form`表单提交数据。在浏览器调试界面可以看到它是`Form Data`方式提交数据，对于上面两种`js`对象，后端都可以正常接收  
    ![这里写图片描述][70]  
    ![这里写图片描述][70 1]  
    ![这里写图片描述][70 2]
2.  `contentType:application/json` \+ `json`数据
    
    以`JSON`格式提交请求数据，在浏览器调试界面可以看到它是`Request Payload`，后端必须使用`@RequestBody` 注解解析数据，并且前端提交的数据**必须是符合`json`串的`js`对象**。
    
    **注意（使用`contentType:application/json`时）：**
    
    1.  后端必须使用`@RequestBody`，并且只能用一个参数与前端传的数据进行匹配，否则`http`请求400
    2.  前端提交的数据必须是符合`json`串的`js`对象，如果是普通的`js`对象，必须使用`JSON.stringify`方法转换，也可以直接拼接参数例如： `"{\"jobName\":\"123\",\"jobGroupName\":\"456\"}"`，否则参数是以`key=value&key1=value1`格式传递，导致`http`请求400。`JSON.stringify`作用：
        
            JSON.stringify()就是把js对象，例如
            	var baseJob = {
            	   jobName:123,
            	   jobGroupName:456
            	}
            	转成
            	var baseJob = "{\"jobName\":\"123\",\"jobGroupName\":\"456\"}"
    3.  `@RequestParam`注解不能接收`application/json`的数据，只能使用`@RequestBody`
    4.  `@PathVariable`注解可以使用
    
    ![这里写图片描述][70 3]  
    ![这里写图片描述][70 4]  
    ![这里写图片描述][70 5]
3.  `contentType:application/json` \+ 查询字符串形式
    
    无论是`post`请求还是`get`请求，后台也不用`@RequestBody`注解，调用和传参是成功的。  
    ![在这里插入图片描述][20181114135812104.jpg]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70 1]

[70]: /images/20220512/d8de5d6422114caa86e9a850bd1ade33.png
[70 1]: /images/20220512/c874087aa8e641ba82892d0837674631.png
[70 2]: /images/20220512/02c3d944335f4d51b7970650c288dfb3.png
[70 3]: /images/20220512/ffc35f5127b74ba8b690c443edf00e4e.png
[70 4]: /images/20220512/94a71dca8bd846f2b400ca870f4f06f5.png
[70 5]: /images/20220512/e3d9945da3bd4f26be43fd1ec37b97dc.png
[20181114135812104.jpg]: /images/20220512/87ec828822904998aa3b3fea2ca63bcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70]: /images/20220512/ba56df9797a9424996bd2ab17d829b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70 1]: /images/20220512/55ccc3e702b540b99e96f7695a052404.png