两种方式:
1、多个数据对象发送至后端
2、表单中的多个数据发送至后端
第一种:多个数据对象发送至后端
数据处理:jQuery取出数据封装成多个对象,并push到数组中
var courseName=$("tbody tr").eq(0).find("td").eq(0).html();
var courseId=$("#courseSelect option[value='"+courseName+"']").data("courseId");
var array=new Array(); //开辟数组
$("tbody tr").each((index,item)=>{
var userName=$(item).find("td").eq(1).html();
var major=$(item).find("td").eq(2).html();
var stuId=$(item).find("td").eq(3).html();
var cls=$(item).find("td").eq(4).html();
var score=$(item).find("td input").val();
//将对象push到数组中
array.push({"courseId":courseId,"userName":userName,"major":major,"stuId":stuId,"cls":cls,"score":score});
});
前端数据发送:利用ajax的post请求,设置好请求头(application/json;charset=utf-8),利用JSON.stringify(…)转化数组
//利用ajax中的post请求
$.ajax({
url: "/user/updateScore",
type: "POST",
contentType : 'application/json;charset=utf-8', //设置请求头信息
dataType:"json",
data: JSON.stringify(array), //将Json对象序列化成Json字符串,JSON.stringify()原生态方法
//data: array.toString(), //不可使用该形式,此类型形式后端只能使用String[]接收
success: function(data){
alert(data.message);
},
error: function(result){
alert(result.message);
}
});
后端接收:使用List接收,泛型为java封装的po类型,并在list上添加@RequestBody注解
@RequestMapping("updateScore")
public Result updateScore(@RequestBody List<Score> score) {
return new Result();
}
结果:
第二种:表单中的多个数据发送至后端
前端数据处理、发送:将表格数据用form表单包括、使用serializeJson获取表单数据并转化为json格式、利用ajax中post请求发送数据需设置好请求头(application/json;charset=utf-8)
var params=$("form").serializeJson(); //获取表单中数据,并转化为json格式
$.ajax({
url: "/user/updateScore",
type: "POST",
contentType : 'application/json;charset=utf-8', //设置post请求头
dataType:"json",
data: params,
success: function(data){
alert(data.message);
},
error: function(result){
alert(result.message);
}
});
后端接收:使用List接收,泛型为java封装的po类型,并在list上添加@RequestBody注解
@RequestMapping("updateScore")
public Result updateScore(@RequestBody List<Score> score) {
return new Result();
}