FAQ:通过ajax将一个list或者数组传送到后台

在开发过程中为了方便操作,我们将有时候往往需要往后台传递一个list或者数组类型的数据。不过如果使用不当可能,数据传输会出现问题,后台无法接收导致报错。
直接上代码可能会更清晰的说明问题。

list数据传输

1、前端代码
直接看ajax部分代码即可。

  • ajax中要添加contentType属性为application/json,声明传输内容为json
  • 使用JSON.stringify()转为json串。
  • 后台参数接收时使用注解@RequestBody
function collect() {
	  jp.confirm('确认要进行修改吗?',function () {
		  var mpsRequireList = listData();
		  //debugger;
		  console.log("data"+mpsRequireList[0])
		  jp.loading();

		  $.ajax({
			  url:'${ctx}/mps/mpsrequire/mpsRequireGather/collect',
			  type:'post',
			  dataType: 'json',
			  contentType:'application/json',
			  data: JSON.stringify(mpsRequireList),
			  success:function(data){
				  if(data.success) {
					  $('#mpsMoTable').bootstrapTable('refresh');
					  jp.success(data.msg);
				  }
			  },
			  error:function(data) {
				  if (!data.success){
					  jp.error(data.msg);
				  }
			  }
		  });
		  
		 
	  });
  }

这里的mpsRequireList是通过Bootstrap获取选中行中的值,进行数据结构组装成数组。

个人认为在前端中对于数组和list没有区别。

 function listData() {
	  var length = $("#mpsMoTable").bootstrapTable('getSelections').length;
	  var array = new Array(length);
	  console.log("length:" +length);
	  var len = 0;
	  $.map($("#mpsMoTable").bootstrapTable('getSelections'),function(row) {
		  var reqQty = $("#mpsRequire"+row.id).val();
		  var reqDate = $("#reqDate"+row.id).val();
		  var mpsRequire = new Object();
		  mpsRequire.id = row.id;
		  mpsRequire.reqQty = reqQty;
		  mpsRequire.reqDate = reqDate;
		  array[len++]=mpsRequire;
	  })
	  if(length == len) {
		  return  array;
	  }
  }

2.后端接收方

  • 使用@RequestBody注解接收。
   @ResponseBody
	@RequiresPermissions("mps:mpsmo:mpsMo:collect")
	@RequestMapping("collect")
    public AjaxJson collect(@RequestBody List<MpsRequire> mpsRequireList) {
		System.out.println("mpsRequireList:" + mpsRequireList.toString());
    	AjaxJson j = new AjaxJson();
    	try {
			mpsRequireGatherService.updateReq(mpsRequireList);
			j.setSuccess(true);
			j.setMsg("保存成功");
		} catch (Exception e) {
			j.setSuccess(false);
			j.setMsg("操作失败");
		}
		return j;
    }

在项目中我用的list传输的,对于数组的没有验证,这里从别处拷贝来的。
地址:https://blog.csdn.net/qq_32786873/article/details/80280869

数组数据传输

1、前端

  • 在数据传输时,应该将traditional属性设置为true,防止深度序列化。默认为false,Jquery会深度序列化参数对象。
$(document).on('click', '#sendArr', function () {
	var ids = [];
	for(var i=0; i<10; i++){
		ids.push(i);
	}
	$.ajax({
		type: 'post',
		dataType: 'json',
		url: '/test/test/sendArr',
		data: {ids:ids},
		traditional: true,
		success: function (result) {
			console.log(result)
		},
		error: function(data){
		  alert("操作异常");
		}
	});
});

2、后端

@PostMapping("/sendArr")
public Map<String,Object> sendArr(String[] ids) {
	Map<String,Object> map = new HashMap<String,Object>();
	map.put("ids", ids);
	return map;
}

如果还有别的好的方法,希望你评论留下解决方案。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值