Spring MVC 提交数组在后台如何接收
1.javascript
在多选select中,可以采用js数组重新封装
var select=document.getElementById('select');
var length = select.options.length - 1;
var value=new Array();
for(var i = length; i >= 0; i--){
value.push(select[i].value);
}
var data={'names':value};
后台接收
public void getName(@RequestParam(value="names[]")List<String> names,HttpServletRequest request,HttpServletResponse response) {
}
也可以这样写
public void getName(HttpServletRequest request){
List<String> names =request.getParameterValues("names[]");
}
2.form表单提交
<form id="nameForm">
<span style="font-family: Arial, Helvetica, sans-serif;"><input type="checkbox" checked="checked" value="name1" name="name"/></span>
<input type="checkbox" checked="checked" value="name2" name="name"/>
<input type="checkbox" checked="checked" value="name3" name="name"/>
<input type="checkbox" checked="checked" value="name4" name="name"/>
<input type="checkbox" checked="checked" value="name5" name="name"/>
<input type="checkbox" checked="checked" value="name6" name="name"/>
<input type="hidden" checked="checked" name="name"/>
</form>
序列化提交$("#nameForm").serialize();
后台接收
public void getName(@RequestParam(value="names[]")List<String> names,HttpServletRequest request,HttpServletResponse response) {
}
也可以这样写
public void getName(HttpServletRequest request){
List<String> names =request.getParameterValues("names[]");
}
这里有个小技巧避免前台如果没有选择,后台会报错,所以加上
<input type="hidden" checked="checked" name="name"/>
3绑定list对象
使用情况,如果一个表单中想提交多条记录,如:
<form id="nameForm">
<input type="text" name="name1"/>
<input type="text" name="age1"/>
<input type="text" name="name2"/>
<input type="text" name="age2"/>
</form>
//将表单序列化成json格式的数据(但不适用于含有控件的表单,例如复选框、多选的select)
$.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) + "]";
}
};
});
function submit() {
//json后的格式[{"age": "12", "name": "aaa"},{"age": "14", "name": "bbb"}]
var jsonStr = $("#form1").serializeJson();
$.ajax({
url: "xxx",
type: "POST",
contentType : 'application/json;charset=utf-8', //设置请求头信息
dataType:"json",
data: jsonStr,
success: function(data){
alert(data);
},
error: function(res){
alert(res.responseText);
}
});
}
controller接受
@RequestMapping(value = "/xxx", method ={RequestMethod.POST})
@ResponseBody
public String submitUserList_3(@RequestBody List<person> list)throws Exception{
return "";
}
1.javascript
在多选select中,可以采用js数组重新封装
var select=document.getElementById('select');
var length = select.options.length - 1;
var value=new Array();
for(var i = length; i >= 0; i--){
value.push(select[i].value);
}
var data={'names':value};
后台接收
public void getName(@RequestParam(value="names[]")List<String> names,HttpServletRequest request,HttpServletResponse response) {
}
也可以这样写
public void getName(HttpServletRequest request){
List<String> names =request.getParameterValues("names[]");
}
2.form表单提交
<form id="nameForm">
<span style="font-family: Arial, Helvetica, sans-serif;"><input type="checkbox" checked="checked" value="name1" name="name"/></span>
<input type="checkbox" checked="checked" value="name2" name="name"/>
<input type="checkbox" checked="checked" value="name3" name="name"/>
<input type="checkbox" checked="checked" value="name4" name="name"/>
<input type="checkbox" checked="checked" value="name5" name="name"/>
<input type="checkbox" checked="checked" value="name6" name="name"/>
<input type="hidden" checked="checked" name="name"/>
</form>
序列化提交$("#nameForm").serialize();
后台接收
public void getName(@RequestParam(value="names[]")List<String> names,HttpServletRequest request,HttpServletResponse response) {
}
也可以这样写
public void getName(HttpServletRequest request){
List<String> names =request.getParameterValues("names[]");
}
这里有个小技巧避免前台如果没有选择,后台会报错,所以加上
<input type="hidden" checked="checked" name="name"/>
3绑定list对象
使用情况,如果一个表单中想提交多条记录,如:
<form id="nameForm">
<input type="text" name="name1"/>
<input type="text" name="age1"/>
<input type="text" name="name2"/>
<input type="text" name="age2"/>
</form>
//将表单序列化成json格式的数据(但不适用于含有控件的表单,例如复选框、多选的select)
$.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) + "]";
}
};
});
function submit() {
//json后的格式[{"age": "12", "name": "aaa"},{"age": "14", "name": "bbb"}]
var jsonStr = $("#form1").serializeJson();
$.ajax({
url: "xxx",
type: "POST",
contentType : 'application/json;charset=utf-8', //设置请求头信息
dataType:"json",
data: jsonStr,
success: function(data){
alert(data);
},
error: function(res){
alert(res.responseText);
}
});
}
controller接受
@RequestMapping(value = "/xxx", method ={RequestMethod.POST})
@ResponseBody
public String submitUserList_3(@RequestBody List<person> list)throws Exception{
return "";
}