springMVC+AJAX+form序列化
2018-03-29 10:39
513 查看
公司最近有需求，要数据提交时的对象绑定,下午测试了几个方法，初步解决相关需求，下面使用springboot快速搭建了一个web项目 来进行测试。
进入该页面，输入相关信息后可以看到控制台输出的两种序列化方法的信息,以及后台返回的数据：
再看一下UserBean实体类:
看一下控制台输出,成功接收到参数:
在表单输入数据,然后提交:
看一下后台的controller,在第一种controller基础上进行修改test方法:
UserBean实体类没有进行修改,UserBean2实体类代码如下:
看完后台代码结构后,接着看一下我们刚刚提交的数据,后台有没有接收到,看后台控制台输出，两个实体类测试成功:
然后进入页面,在表单输入数据 然后提交:
修改UserBean实体类如下:
修改controller的test方法:
然后看一下表单提交后后台的输出:
可以看到两个实体的name属性和age属性都有值,而UserBean2的sport属性没有值,因为前台checkbox的name是sport 不是 user2.sport
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
一.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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单实现：jquery ajax/jquery.form.js + springmvc上传文件，带进度条
- 使用html+ajax+formdata+SpringMVC实现单个文件，和多个文件上传功能
- SpringMVC+Ajax用FormData对象上传页面的图片（文件），并且立马在页面上显示出来
- 使用html+ajax+formdata+SpringMVC实现单个文件，和多个文件上传功能
- RESTful风格(使用Ajax+Spring MVC框架实现)
- jquery ajax spring mvc controller 传值方法
- 实习笔记之Spring MVC + ajax + highcharts
- springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
- SpringMVC ajax中文乱码的解决办法
- 表单序列化，jq中的serialize，ajax提交整个form表单，无需逐个拼写json
- Spring MVC(10)：REST 支持 & Ajax+Spring MVC 实例
- spring mvc ajaxfileupload文件上传返回json下载问题
- C#_MVC_ajax for form
- Spring：spring+springMVC+jQuery+Ajax+Mysql环境搭建实例
- springMVC + ajaxfileupload异步上传图片预览，裁剪并保存图片
- 来段代码提提神-Java实现EXCEL模板化导出：ajax+springMVC或者Struts为例
- spring mvc json ajax jquery
- NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) accordion控件的初步实现（附代码下载）
- SpringMVC+ajax返回JSON串
- SpringMVC—SimpleFormController的referenceData方法