SpringMVC中AJax表单提交中如何传表单值json序列化到后台
一.form序列化
JQuery的表单序列化有两种方法：
//序列化表单内容为字符串
第一种:$('#form1').serialize();
//序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。
//注意,此方法返回的是JSON对象数组而非JSON字符串。
第二种:$('#form1').serializeArray();
下面开始进行测试,html和后台主体代码如下:
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 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 getSport() {
return sport;
}
public final void setSport(List sport) {
this.sport = sport;
}
@Override
public String toString() {
return "UserBean [name=" + name + ", age=" + age + ", sport=" + sport + "]";
}
}
看一下控制台输出,成功接收到参数:
第二种:使用两个实体类接收表单参数:
修改上面的html代码表单部分,增加几个输入框,修改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 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 getSport() {
return sport;
}
public final void setSport(List sport) {
this.sport = sport;
}
@Override
public String toString() {
return "UserBean2 [name1=" + name1 + ", age1=" + age1 + ", sport=" + sport
+ "]";
}
} 看完后台代码结构后,接着看一下我们刚刚提交的数据,后台有没有接收到,看后台控制台输出，两个实体类测试成功:
第三种 一个实体类属性引用另一个实体类对象:
修改html表单form代码如下:
然后进入页面,在表单输入数据 然后提交:
修改UserBean实体类如下:
public class UserBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private Integer age;
private List 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 getSport() {
return sport;
}
public final void setSport(List 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：
测试一下效果,出发submit()方法,看控制台信息,修改成功:
5.springMVC参数注入时,实体类的属性要有get set方法，详情可看SpringMVC参数绑定源码:
https://www.cnblogs.com/w-y-c-m/p/8443892.html
--------------------- 本文来自 菊花超人 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/woheniccc/article/details/79739007?utm_source=copy