SpringMVC接受json参数和jquery表单序列化

淩亂°似流年 2023-05-31 12:11 1阅读 0赞

## html代码 ##

## 1.传统方式接收参数，这里利用序列化时key-value的形式并且中间用&符号隔开 ##

$('#formbtn').click(function () { 
                var serialize = $("#myform").serialize();
                console.log(serialize);
                $.post("/jsonTest",serialize,function (data) { 
                    console.log(data);
                })
     	});

2.jquery表单序列化转json对象插件

## 3.利用插件序列化表单 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ2NzI1MQ_size_16_color_FFFFFF_t_70]  
运行时当表单接受复杂类型的数组参数时提交失败，原因如下，在请求头中这种请求头的方式不支持复杂类型的传输  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ2NzI1MQ_size_16_color_FFFFFF_t_70 1]

## 修改ajax请求代码如下，这里将json数据转换成了json字符串，在后台接收时使用requestBody接收 ##

$.ajax({ 
          type:"post",
           url:"/jsonTest",
           data:JSON.stringify(serialize),
           contentType:"application/json;charset=UTF-8",
           success:function (data) { 
               alert(data);
           }
       });

## 后台代码 ##

@RequestMapping("/jsonTest")
        @ResponseBody
        public String jsonTest(@RequestBody User user){ 
            System.out.println("测试json"+user);
            return "result";
        }

注意这里用到了json的依赖如下

<dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.9.8</version>
     </dependency>
     <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.9.8</version>
     </dependency>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ2NzI1MQ_size_16_color_FFFFFF_t_70]: /images/20230531/48e9cc7f25cb49c7a1b3938da9324bb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ2NzI1MQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/e84f3a794ee84271833cfc3be47eea1e.png