解决前端发送多条对象类型数据至后端

两种方式:
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();
	}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值