欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一个表单同时提交多条记录

程序员文章站 2023-09-28 15:32:03
问题背景: 我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC,前端HTML和SpringMVC Controller里该如何处理? 第1种方法:表单提交,以字段数组接收; 第2种方法:表单提交,以BeanListModel接收; 第3种方法:将Json对象序列化成Json字符串提 ......

问题背景: 
我要在一个表单里同时一次性提交多名乘客的个人信息到springmvc,前端html和springmvc controller里该如何处理?

  • 第1种方法:表单提交,以字段数组接收;
  • 第2种方法:表单提交,以beanlistmodel接收;
  • 第3种方法:将json对象序列化成json字符串提交,以list接收;
  • 第4种方法:将表单对象序列化成json字符串提交,以list接收; 
    第4种方法其实是第3种方法的升级,就是将表单转成json对象,再转成json字符串提交; 
    然而,第4种方法还不支持含有多选控件表单的提交,故应该还有第5种加强版的方法。

以上4种方法都共用同一个user实体类,代码如下:

  1. public class user {
  2.  
  3. private integer id;
  4. private string name;
  5. private string pwd;
  6.  
  7. @override
  8. public string tostring() {
  9. return "user{" +
  10. "id=" + id +
  11. ", name='" + name + '\'' +
  12. ", pwd='" + pwd + '\'' +
  13. '}';
  14. }
  15. // .......后面还有getter、setter方法,省略了
  16. }

第1种方法:表单提交,以字段数组接收 
html代码如下:

  1. <form action="/user/submituserlist_1" method="post">
  2. id:<input type="text" name="id"><br/>
  3. username:<input type="text" name="name"><br/>
  4. password:<input type="text" name="pwd"><br/><br/>
  5.  
  6. id:<input type="text" name="id"><br/>
  7. username:<input type="text" name="name"><br/>
  8. password:<input type="text" name="pwd"><br/><br/>
  9. <input type="submit" value="submit">
  10. </form>

java代码如下:

  1. @requestmapping(value = "/submituserlist_1", method ={requestmethod.post})
  2. @responsebody
  3. public string submituserlist_1(httpservletresponse response,integer[] id, string[] name, string[] pwd)
  4. throws exception{
  5. string result = "";
  6. if(id == null || id.length <= 0){ return "no any id.中文"; }
  7. list<user> userlist = new arraylist<user>();
  8. for (int i = 0; i < id.length; i++ ) {
  9. user user = new user();
  10. user.setid(id[i]);
  11. user.setname(name[i]);
  12. user.setpwd(pwd[i]);
  13. userlist.add(user);
  14. }
  15. result = this.showuserlist(userlist);
  16. return result;
  17. }

第2种方法:表单提交,以beanlistmodel接收 
html代码如下:

  1. <form action="/user/submituserlist_2" method="post">
  2. id:<input type="text" name="users[0].id"><br/>
  3. username:<input type="text" name="users[0].name"><br/>
  4. password:<input type="text" name="users[0].pwd"><br/><br/>
  5.  
  6. id:<input type="text" name="users[2].id"><br/>
  7. username:<input type="text" name="users[2].name"><br/>
  8. password:<input type="text" name="users[2].pwd"><br/><br/>
  9. <input type="submit" value="submit">
  10. </form>

java代码: 
除了刚才公用的user类,还要封装一个user的容器类usermodel:

  1. public class usermodel {
  2. private list<user> users;
  3.  
  4. public list<user> getusers() {
  5. return users;
  6. }
  7.  
  8. public void setusers(list<user> users) {
  9. this.users = users;
  10. }
  11.  
  12. public usermodel(list<user> users) {
  13. super();
  14. this.users = users;
  15. }
  16.  
  17. public usermodel() {
  18. super();
  19. }
  20.  
  21. }

springmvc controller方法:

  1. @requestmapping(value = "/submituserlist_2", method ={requestmethod.post})
  2. @responsebody
  3. public string submituserlist_2(usermodel users)
  4. throws exception{
  5. string result = "";
  6. list<user> userlist = users.getusers();
  7. if(userlist == null || userlist.size() <= 0){ return "no any id.中文"; }
  8. result = this.showuserlist(userlist);
  9. return result;
  10. }

第3种方法:将json对象序列化成json字符串提交,以list接收 
html代码:

  1. <head>
  2. <title>submituserlist_3</title>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <script language="javascript" src="/js/jquery.min.js" ></script>
  5. <script language="javascript" src="/js/jquery.json.min.js" ></script>
  6. <script type="text/javascript" language="javascript">
  7. function submituserlist_3() {alert("ok");
  8. var customerarray = new array();
  9. customerarray.push({id: "1", name: "李四", pwd: "123"});
  10. customerarray.push({id: "2", name: "张三", pwd: "332"});
  11. $.ajax({
  12. url: "/user/submituserlist_3",
  13. type: "post",
  14. contenttype : 'application/json;charset=utf-8', //设置请求头信息
  15. datatype:"json",
  16. //data: json.stringify(customerarray), //将json对象序列化成json字符串,json.stringify()原生态方法
  17. data: $.tojson(customerarray), //将json对象序列化成json字符串,tojson()需要引用jquery.json.min.js
  18. success: function(data){
  19. alert(data);
  20. },
  21. error: function(res){
  22. alert(res.responsetext);
  23. }
  24. });
  25. }
  26. </script>
  27. </head>
  28.  
  29. <body>
  30. <h1>submituserlist_3</h1>
  31. <input id="submit" type="button" value="submit" onclick="submituserlist_3();">
  32. </body>

java代码:

  1. @requestmapping(value = "/submituserlist_3", method ={requestmethod.post})
  2. @responsebody
  3. public string submituserlist_3(@requestbody list<user> users)
  4. throws exception{
  5. string result = "";
  6. if(users == null || users.size() <= 0){ return "no any id.中文"; }
  7. result = this.showuserlist(users);
  8. return result;
  9. }

第4种方法:将表单对象序列化成json字符串提交,以list接收 
html代码:

  1. <!doctype html public "-//w3c//dtd html 4.01 transitional//en"
  2. "http://www.w3.org/tr/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>submituserlist_4</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  7. <script language="javascript" src="/js/jquery.min.js" ></script>
  8. <script type="text/javascript" language="javascript">
  9. //将表单序列化成json格式的数据(但不适用于含有控件的表单,例如复选框、多选的select)
  10. (function($){
  11. $.fn.serializejson = function(){
  12. var jsondata1 = {};
  13. var serializearray = this.serializearray();
  14. // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
  15. $(serializearray).each(function () {
  16. if (jsondata1[this.name]) {
  17. if ($.isarray(jsondata1[this.name])) {
  18. jsondata1[this.name].push(this.value);
  19. } else {
  20. jsondata1[
    (0)
    打赏 一个表单同时提交多条记录 微信扫一扫

    相关文章:

    版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

    发表评论

    一个表单同时提交多条记录
    验证码: 一个表单同时提交多条记录