问题背景：
我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC，前端HTML和SpringMVC Controller里该如何处理？
- 第1种方法：表单提交，以字段数组接收；
- 第2种方法：表单提交，以BeanListModel接收；
- 第3种方法：将Json对象序列化成Json字符串提交，以List接收；
- 第4种方法：将表单对象序列化成Json字符串提交，以List接收；
第4种方法其实是第3种方法的升级，就是将表单转成Json对象，再转成Json字符串提交；
然而，第4种方法还不支持含有多选控件表单的提交，故应该还有第5种加强版的方法。
以上4种方法都共用同一个User实体类，代码如下：
-
public
class
User {
-
-
private Integer id;
-
private String name;
-
private String pwd;
-
-
@Override
-
public
String
toString
() {
-
return
"User{" +
-
"id=" + id +
-
", name='" + name +
'\'' +
-
", pwd='" + pwd +
'\'' +
-
'}';
-
}
-
// .......后面还有getter、setter方法，省略了
-
}
第1种方法：表单提交，以字段数组接收
HTML代码如下：
-
<form action="/user/submitUserList_1" method="post">
-
ID:
<input type="text" name="id">
<br/>
-
Username:
<input type="text" name="name">
<br/>
-
Password:
<input type="text" name="pwd">
<br/>
<br/>
-
-
ID:
<input type="text" name="id">
<br/>
-
Username:
<input type="text" name="name">
<br/>
-
Password:
<input type="text" name="pwd">
<br/>
<br/>
-
<input type="submit" value="submit">
-
</form>
Java代码如下：
-
@RequestMapping(value =
"/submitUserList_1", method ={RequestMethod.POST})
-
@ResponseBody
-
public String submitUserList_1(HttpServletResponse response,Integer[]
id
, String[]
name
, String[] pwd)
-
throws Exception{
-
String
result =
"";
-
if(
id ==
null ||
id.
length <=
0){
return
"No any ID.中文"; }
-
List<User> userList =
new ArrayList<User>();
-
for (
int i =
0; i <
id.
length; i++ ) {
-
User user =
new User();
-
user.setId(
id[i]);
-
user.setName(
name[i]);
-
user.setPwd(pwd[i]);
-
userList.add(user);
-
}
-
result =
this.showUserList(userList);
-
return
result;
-
}
第2种方法：表单提交，以BeanListModel接收
HTML代码如下：
-
<form action="/user/submitUserList_2" method="post">
-
ID:
<input type="text" name="users[0].id">
<br/>
-
Username:
<input type="text" name="users[0].name">
<br/>
-
Password:
<input type="text" name="users[0].pwd">
<br/>
<br/>
-
-
ID:
<input type="text" name="users[2].id">
<br/>
-
Username:
<input type="text" name="users[2].name">
<br/>
-
Password:
<input type="text" name="users[2].pwd">
<br/>
<br/>
-
<input type="submit" value="Submit">
-
</form>
Java代码：
除了刚才公用的User类，还要封装一个User的容器类UserModel：
-
public
class UserModel {
-
private List<User> users;
-
-
public
List<User>
getUsers
() {
-
return users;
-
}
-
-
public
void
setUsers
(List<User> users) {
-
this.users = users;
-
}
-
-
public
UserModel
(List<User> users) {
-
super();
-
this.users = users;
-
}
-
-
public
UserModel
() {
-
super();
-
}
-
-
}
SpringMVC Controller方法：
-
@RequestMapping
(value =
"/submitUserList_2"
, method ={RequestMethod.POST})
-
@ResponseBody
-
public String
submitUserList_2(UserModel users)
-
throws Exception{
-
String result =
"";
-
List<User> userList = users.getUsers();
-
if(userList ==
null || userList.size() <=
0){
return
"No any ID.中文"; }
-
result =
this.showUserList(userList);
-
return result;
-
}
第3种方法：将Json对象序列化成Json字符串提交，以List接收
HTML代码：
-
<head>
-
<title>submitUserList_3
</title>
-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
-
<script language="JavaScript" src="/js/jquery.min.js" >
</script>
-
<script language="JavaScript" src="/js/jquery.json.min.js" >
</script>
-
<script type="text/javascript" language="JavaScript">
-
function submitUserList_3() {
alert(
"ok"
);
-
var
customerArray =
new
Array
();
-
customerArray.push({
id:
"1"
, name:
"李四"
, pwd:
"123"
});
-
customerArray.push({
id:
"2"
, name:
"张三"
, pwd:
"332"
});
-
$.ajax({
-
url:
"/user/submitUserList_3"
,
-
type:
"POST"
,
-
contentType :
'application/json;charset=utf-8'
,
//设置请求头信息
-
dataType:
"json"
,
-
//data: JSON.stringify(customerArray), //将Json对象序列化成Json字符串，JSON.stringify()原生态方法
-
data: $.toJSON(customerArray),
//将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
-
success:
function(data){
-
alert(data);
-
},
-
error:
function(res){
-
alert(res.responseText);
-
}
-
});
-
}
-
</script>
-
</head>
-
-
<body>
-
<h1>submitUserList_3
</h1>
-
<input id="submit" type="button" value="Submit" onclick="submitUserList_3();">
-
</body>
Java代码：
-
@RequestMapping
(value =
"/submitUserList_3"
, method ={RequestMethod.POST})
-
@ResponseBody
-
public String
submitUserList_3(
@RequestBody List<User> users)
-
throws Exception{
-
String result =
"";
-
if(users ==
null || users.size() <=
0){
return
"No any ID.中文"; }
-
result =
this.showUserList(users);
-
return result;
-
}
第4种方法：将表单对象序列化成Json字符串提交，以List接收
HTML代码：
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>submitUserList_4
</title>
-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
-
<script language="JavaScript" src="/js/jquery.min.js" >
</script>
-
<script type="text/javascript" language="JavaScript">
-
//将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)
-
(
function($){
-
$.fn.serializeJson =
function(){
-
var
jsonData1 = {};
-
var
serializeArray =
this
.serializeArray();
-
// 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
-
$(serializeArray).each(
function () {
-
if
(jsonData1[
this
.name]) {
-
if
($.isArray(jsonData1[
this
.name])) {
-
jsonData1[
this
.name].push(
this
.value);
-
}
else
{
-
jsonData1[
this
.name] = [jsonData1[
this
.name],
this
.value];
-
}
-
}
else
{
-
jsonData1[
this
.name] =
this
.value;
-
}
-
});
-
// 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
-
var
vCount =
0
;
-
// 计算json内部的数组最大长度
-
for
(
var
item
in
jsonData1){
-
var
tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length :
1
;
-
vCount = (tmp > vCount) ? tmp : vCount;
-
}
-
-
if
(vCount >
1
) {
-
var
jsonData2 =
new
Array
();
-
for
(
var
i =
0
; i < vCount; i++){
-
var
jsonObj = {};
-
for
(
var
item
in
jsonData1) {
-
jsonObj[item] = jsonData1[item][i];
-
}
-
jsonData2.push(jsonObj);
-
}
-
return
JSON
.stringify(jsonData2);
-
}
else
{
-
return
"["
+
JSON
.stringify(jsonData1) +
"]"
;
-
}
-
};
-
})(jQuery);
-
-
function submitUserList_4() {
alert(
"ok"
);
-
var
jsonStr = $(
"#form1"
).serializeJson();
-
//console.log("jsonStr:\r\n" + jsonStr);
-
//alert(jsonStr);
-
$.ajax({
-
url:
"/user/submitUserList_4"
,
-
type:
"POST"
,
-
contentType :
'application/json;charset=utf-8'
,
//设置请求头信息
-
dataType:
"json"
,
-
data: jsonStr,
-
success:
function(data){
-
alert(data);
-
},
-
error:
function(res){
-
alert(res.responseText);
-
}
-
});
-
}
-
</script>
-
</head>
-
-
<body>
-
<h1>submitUserList_4
</h1>
-
<form id="form1">
-
ID:
<input type="text" name="id">
<br/>
-
Username:
<input type="text" name="name">
<br/>
-
Password:
<input type="text" name="pwd">
<br/>
<br/>
-
-
ID:
<input type="text" name="id">
<br/>
-
Username:
<input type="text" name="name">
<br/>
-
Password:
<input type="text" name="pwd">
<br/>
<br/>
-
<input type="button" value="submit" onclick="submitUserList_4();">
-
</form>
-
</body>
-
</html>
Java代码：
-
@RequestMapping
(value =
"/submitUserList_4"
, method ={RequestMethod.POST})
-
@ResponseBody
-
public String
submitUserList_4(
@RequestBody List<User> users)
-
throws Exception{
-
String result =
"";
-
if(users ==
null || users.size() <=
0){
return
"No any ID.中文"; }
-
result =
this.showUserList(users);
-
return result;
-
}
总结：
第1、2种方法其实都有一个共同的BUG：假如提交三条记录时，前面两条记录的某些字段不填值的话，在SpringMVC里接收不准确了。而且，每2种方法在HMTL中需要给name属性添加[下标]，如果下标有跨度的话（比如第一组控件下标是0,第二组下标是2），那么SpringMVC里其实的是0到2三个对象的，默认下标是1的那个对象全为null值。
第3、4种方法最实用。
以上方法参考自以下URL：
http://www.cnblogs.com/wsw0515/p/3582627.html
http://www.oschina.net/question/917732_106601
http://jxd-zxf.iteye.com/blog/2072300
http://www.tashan10.com/jquery-jiang-biao-dan-xu-lie-hua-wei-jsondui-xiang/
扫一扫
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
