[Spring] JSONArray를 사용하지 않고 Ajax로 배열 list 넘기기

ajax로 배열 데이터를 넘기는 방법을 알아보겠습니다.

구글링을 해보면 대부분의 포스트가 배열을 파싱 하는 방법으로 JSONArray와 JSONObject를 이용하고 있는데, 다른 방법을 알려드리겠습니다.

 

아래와 같은 데이터를 Controller로 넘기려고 합니다.

const data = {
  "id": 10,
  "typeList": [
    {"type":"A", "typeNm":"에이"},
    {"type":"B", "typeNm":"비"}
  ]
};

 

 

해당 데이터를 json dataType로 보내면, 아래와 같은 오류가 발생합니다.

Property referenced in indexed property path 'typeList[0][type]' is neither an array nor a List nor a Map;

 

typeList[0].type = "A" 와 같은 형식으로 넘어가야 하는데, typeList[0].[type] = "A" 로 전송되어 생기는 문제입니다.

해결방법은 두 가지가 있습니다.

 

 

1.

첫번째 방법은 아래처럼 배열 데이터를 일일이 작성한 뒤 json type으로 전송하는 방법입니다.

const data = {
  "id": 10
};

data["typeList[0].type"] = "A";
data["typeList[0].typeNm"] = "에이";
data["typeList[1].type"] = "B";
data["typeList[1].typeNm"] = "비";

$.ajax({
	url: "/test",
	data: data,
	type: 'POST',
	async: false,
	dataType: 'json',
	error: function (error) {
		console.log(error);
	},
	success: function (data) {
		console.log(data);
	}
});

@RestController
public class Test {
	@RequestMapping("/test")
	public ResponseEntity<Object> test(@Valid TestVO param) {
		return ResponseEntity.ok(param);
	}

	@Getter
	@Setter
	@ToString
	public static class TestVO {
		private Long id;
		private List<TypeVO> typeList;
	}

	@Getter
	@Setter
	@ToString
	public static class TypeVO {
		@NotBlank
		private String type;
		private String typeNm;
	}
}

 

 

2.

두번째 방법은 전달하려는 json type의 data를 JSON문자열로 변경해주고,

$.ajax({
	url: "/test",
	data: JSON.stringify(data),
	type: 'POST',
	contentType: "application/json; charset=utf-8",
	async: false,
	dataType: 'json',
	error: function (error) {
		console.log(error);
	},
	success: function (data) {
		console.log(data);
	}
});

 

Controller에서는 @RequestBody 어노테이션을 사용하여 Object로 파라미터를 받으면 됩니다.

@RestController
public class Test {
	@RequestMapping("/test")
	public ResponseEntity<Object> test(@Valid @RequestBody TestVO param) {
		return ResponseEntity.ok(param);
	}

	@Getter
	@Setter
	@ToString
	public static class TestVO {
		private Long id;
        
		@Valid
		private List<TypeVO> typeList;
	}

	@Getter
	@Setter
	@ToString
	public static class TypeVO {
		@NotBlank
		private String type;
		private String typeNm;
	}
}

 

그런데 두 번째 방법은 XssEscapeServletFilter 사용 시, 적용되지 않습니다.