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

最新推荐文章于 2022-03-21 21:37:17 发布

taojin12

最新推荐文章于 2022-03-21 21:37:17 发布

阅读量334

点赞数

分类专栏： FAQ 文章标签： list array

本文链接：https://blog.csdn.net/taojin12/article/details/89556844

版权

FAQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在开发过程中为了方便操作，我们将有时候往往需要往后台传递一个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;
}

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