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方法