您的位置:首页 > 编程语言 > Java开发

springMVC+AJAX+form序列化

2018-03-29 10:39 519 查看
公司最近有需求,要数据提交时的对象绑定,下午测试了几个方法,初步解决相关需求,下面使用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
4000
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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息