springMVC+AJAX+form序列化

最新推荐文章于 2022-04-23 16:14:35 发布

菊花超人

最新推荐文章于 2022-04-23 16:14:35 发布

阅读量4.7k

点赞数 4

分类专栏： java 文章标签： jquery springmvc ajax 参数绑定 form表单序列化

本文链接：https://blog.csdn.net/woheniccc/article/details/79739007

版权

java 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

公司最近有需求，要数据提交时的对象绑定,下午测试了几个方法，初步解决相关需求，下面使用springboot快速搭建了一个web项目来进行测试。

一.form序列化

JQuery的表单序列化有两种方法：

//序列化表单内容为字符串
第一种:$('#form1').serialize();
//序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。
//注意,此方法返回的是JSON对象数组而非JSON字符串。
第二种:$('#form1').serializeArray();

下面开始进行测试,html和后台主体代码如下:

HTML代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript" src="/jq/jquery-3.3.1.min.js"></script>
<script>
    function submit() {
         console.info($('#form1').serialize())
         console.info($('#form1').serializeArray())
        $.ajax({
            method : 'post',
            url : '/mvc/m1',
            dateType:'json',
            data : $('#form1').serializeArray(),
            success : function(data) {
                console.info(data)
            }
        })
    }
</script>
</head>
<body>
    <form id="form1">
        用户名: <input type="text" name="name"/> <br> 
        年    龄: <input type="text" name="age"/><br>
              兴    趣: <input type="checkbox" name="sport" value="1">足球
               <input type="checkbox" name="sport" value="2">篮球<br>
               <a onclick="submit()">提交</a>

    </form>
</body>
</html>

进入该页面，输入相关信息后可以看到控制台输出的两种序列化方法的信息,以及后台返回的数据：
这里写图片描述

二.SpringMVC使用实体对象接收AJAX.

第一种使用单实体类对象接收表单参数:

首先看一下我们的controller:

@Controller
@RequestMapping("/mvc")
public class MvcDemo {
    /**
     * 
     * @Description: ajax访问的方法,使用实体类接收表单序列化的参数
     * @author QSNP242
     * @param user
     * @return  String
     * @throws
     * @date 2018年3月29日
     */
    @RequestMapping("/m1")
    @ResponseBody
 public UserBean test(UserBean user){
        System.out.println("ok");
        System.out.println(user.toString());
     return user;
 }
    /**
     * 
     * @Description: 访问表单的jsp
     * @author QSNP242
     * @return  String
     * @throws
     * @date 2018年3月29日
     */
    @RequestMapping("/enter")
    public String enter(){
        return "index";
    }
}

再看一下UserBean实体类:

public class UserBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private Integer age;
private List<Integer> sport;
public final String getName() {
    return name;
}

public final void setName(String name) {
    this.name = name;
}

public final Integer getAge() {
    return age;
}

public final void setAge(Integer age) {
    this.age = age;
}

public final List<Integer> getSport() {
    return sport;
}

public final void setSport(List<Integer> sport) {
    this.sport = sport;
}
@Override
public String toString() {
    return "UserBean [name=" + name + ", age=" + age + ", sport=" + sport + "]";
}

}

看一下控制台输出,成功接收到参数:

这里写图片描述

第二种:使用两个实体类接收表单参数:

修改上面的html代码表单部分,增加几个输入框,修改form代码如下:

    <form id="form1">
        用户名: <input type="text" name="name"/> <br> 
        年    龄: <input type="text" name="age"/><br>
        <!-- 新增部分 -->
        用户名2: <input type="text" name="name1"/> <br> 
        年    龄2: <input type="text" name="age1"/><br>
        <!--UserBean和UserBean2 实体类都有相同name的属性  -->
              兴    趣: <input type="checkbox" name="sport" value="1">足球
               <input type="checkbox" name="sport" value="2">篮球<br>
               <a onclick="submit()">提交</a>

    </form>

在表单输入数据,然后提交:

这里写图片描述

看一下后台的controller,在第一种controller基础上进行修改test方法:

    @RequestMapping("/m1")
    @ResponseBody
 public UserBean test(UserBean user,UserBean2 user2){
        System.out.println("ok");
        System.out.println(user.toString());
        //输出user2
        System.out.println(user2.toString());
     return user;
 }

UserBean实体类没有进行修改,UserBean2实体类代码如下:

public class UserBean2 implements Serializable {
private static final long serialVersionUID = 1L;
private String name1;
private Integer age1;
private List<Integer> sport;//和UserBean实体类相同的字段
public final String getName1() {
    return name1;
}

public final void setName1(String name1) {
    this.name1 = name1;
}

public final Integer getAge1() {
    return age1;
}

public final void setAge1(Integer age1) {
    this.age1 = age1;
}

public final List<Integer> getSport() {
    return sport;
}

public final void setSport(List<Integer> sport) {
    this.sport = sport;
}

@Override
public String toString() {
    return "UserBean2 [name1=" + name1 + ", age1=" + age1 + ", sport=" + sport
            + "]";
}
}

看完后台代码结构后,接着看一下我们刚刚提交的数据,后台有没有接收到,看后台控制台输出，两个实体类测试成功:

这里写图片描述

第三种一个实体类属性引用另一个实体类对象:

修改html表单form代码如下:

    <form id="form1">
        用户名: <input type="text" name="name"/> <br> 
        年    龄: <input type="text" name="age"/><br>
        <!-- 新增部分 -->
        用户名2: <input type="text" name="user2.name1"/> <br> 
        年    龄2: <input type="text" name="user2.age1"/><br>
        <!--UserBean和UserBean2 实体类都有相同name的属性  -->
              兴    趣: <input type="checkbox" name="sport" value="1">足球
               <input type="checkbox" name="sport" value="2">篮球<br>
               <a onclick="submit()">提交</a>

    </form>

然后进入页面,在表单输入数据然后提交:

这里写图片描述
修改UserBean实体类如下:

public class UserBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private Integer age;
private List<Integer> sport;
private UserBean2 user2;//UserBean2实体类对象

public final UserBean2 getUser2() {
    return user2;
}

public final void setUser2(UserBean2 user2) {
    this.user2 = user2;
}

public final String getName() {
    return name;
}

public final void setName(String name) {
    this.name = name;
}

public final Integer getAge() {
    return age;
}

public final void setAge(Integer age) {
    this.age = age;
}

public final List<Integer> getSport() {
    return sport;
}

public final void setSport(List<Integer> sport) {
    this.sport = sport;
}


@Override
public String toString() {
    return "UserBean [name=" + name + ", age=" + age + ", sport=" + sport
            + ", user2=" + user2 + "]";
}

}

修改controller的test方法:

    @RequestMapping("/m1")
    @ResponseBody
 public UserBean test(UserBean user){
        System.out.println("ok");
        System.out.println(user.toString());
     return user;
 }

然后看一下表单提交后后台的输出:

这里写图片描述

可以看到两个实体的name属性和age属性都有值,而UserBean2的sport属性没有值,因为前台checkbox的name是sport 不是 user2.sport

三.注意事项:

1.上面两种方法进行表单序列化时,只对form内部含有name属性的标签进行序列化
2.input的type为file、image、button、submit、reset都不会被序列化
3.若要后台实体类对象接收到表单的数据,表单对应组件的name要和后台实体类对应字段的名字相同!

4..serializeArray()序列化的对象,其中的格式key叫 name 和 value，如图:
这里写图片描述
有时候我们需要自己将key的名字,因为现在的key是name和value，可能出现重复的json，我们需要去掉name和value：

<script>
     //去掉serializeArray()的name和value
     $.fn.serializeObject = function() {  
         var o = {};    
                 var a = this.serializeArray();    
                 $.each(a, function() {    
                     if (o[this.name]) {    
                         if (!o[this.name].push) {    
                             o[this.name] = [ o[this.name] ];    
                         }    
                         o[this.name].push(this.value || '');    
                     } else {    
                         o[this.name] = this.value || '';    
                     }    
                 });    
                 return o;    
             };  
     function submit() {
        console.info($('#form1').serializeArray())
         console.info($('#form1').serializeObject())
    }
</script>

测试一下效果,出发submit()方法,看控制台信息,修改成功:

这里写图片描述

5.springMVC参数注入时,实体类的属性要有get set方法，详情可看SpringMVC参数绑定源码:

https://www.cnblogs.com/w-y-c-m/p/8443892.html

菊花超人

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
springMVC+AJAX+form序列化

公司最近有需求，要数据提交时的对象绑定,下午测试了几个方法，初步解决相关需求，下面使用springboot快速搭建了一个web项目来进行测试。一.form序列化 JQuery的表单序列化有两种方法：//序列化表单内容为字符串第一种:$('#form1').serialize();//序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。/...
复制链接

扫一扫