기계는 거짓말하지 않는다

Ajax 데이터 Controller 전달 본문

Web/Spring Boot

Ajax 데이터 Controller 전달

KillinTime 2020. 12. 3. 20:51

값을 받지 못하면 org.springframework.web.bind.MissingServletRequestParameterException 이 발생한다.

Parameter 가 필수적이지 않다면 @RequestParam 의 required 를 false로 설정.

- One Parameter

Controller

@RestController
@RequiredArgsConstructor
public class HomeDataController {
	
	@PostMapping("/test/sendData")
	public String sendData(@RequestParam(value="data") String data) {
		return "return: " + data;
	}
}

 

HTML

<body>
	<div>
		<input id="stringData" type="text" placeholder="보낼 데이터 입력">
		<button onclick="send()">보내기</button>
		<div><b id="result">받은 데이터 결과 </b></div>
	</div>
	
	<script>
		function send() {
        	var str = $("#stringData").val();
			
            $.ajax({
            	type: "POST",
                url: "/test/sendData",
                data: {
                    data: str
                },
                success: function(data) {
                	var result = $("#result");
                	result.html(data);
                },
                error: function () {
	                alert("error");
	            }
			});
		}
	</script>
</body>

HTML
결과

데이터 하나를 넘겨 줄때의 예이다. @RequestParam 없이도 동작한다.

- Multiple Parameter

Controller

@RestController
@RequiredArgsConstructor
public class HomeDataController {
	
	@PostMapping("/test/sendData")
	public String sendData(@RequestParam(value="str") String str,
			@RequestParam(value="number") int number) {
		return "return: " + str + ", number: " + number;
	}
}

 

HTML

<body>
	<div>
		<input id="stringData" type="text" placeholder="보낼 데이터 입력"><br>
		<input id="numberData" type="number" placeholder="보낼 숫자 입력">
		<button onclick="send()">보내기</button>
		<div><b id="result">받은 데이터 결과 </b></div>
	</div>
	
	<script>
		function send() {
			var str = $("#stringData").val();
			var n = $("#numberData").val();
			
			$.ajax({
                type: "POST",
                url: "/test/sendData",
                data: {
                    str: str,
                    number: n
                },
                success: function(data) {
                	var result = $("#result");
                	result.html(data);
                },
                error: function () {
	                alert("error");
	            }
			});
		}
	</script>
</body>

HTML
결과

보낼 데이터를 아래와 같이 묶어 선언해도 된다.

var sendData = {
	str: str,
	number: n
};
			
$.ajax({
	type: "POST",
	url: "/test/sendData",
    data: sendData,
    success: function(data) {
    	var result = $("#result");
		result.html(data);
		return true;
	},
    error: function () {
		alert("error");
		return false;
	}
});

- DTO

SendDataDTO

@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public class SendDataDTO {
	private String str;
	private int number;
	private ArrayList<String> strArrayList;
}

 

Controller

@RestController
@RequiredArgsConstructor
public class HomeDataController {
	
	@PostMapping("/test/sendData")
	public String sendData(SendDataDTO data) {
		// null 검사 필요
		return "return: " + data.getStr() + ", number: " 
				+ data.getNumber() 
				+ ", Array[1]: " + data.getStrArrayList().get(1);
	}
}

null 검사를 하는 것이 좋다.

 

HTML

<body>
	<div>
		<input id="stringData" type="text" placeholder="보낼 데이터 입력"><br>
		<input id="numberData" type="number" placeholder="보낼 숫자 입력">
		<button onclick="send()">보내기</button>
		<div><b id="result">받은 데이터 결과 </b></div>
	</div>
	
	<script>
		function send() {
			var str = $("#stringData").val();
			var n = $("#numberData").val();
			var strArray = new Array();
			strArray.push("A");
			strArray.push("B");
			strArray.push("C");
			
			var sendData = {
					str: str,
					number: n,
					strArrayList: strArray
			};
			
			$.ajax({
                type: "POST",
                url: "/test/sendData",
                data: sendData,
                success: function(data) {
                	var result = $("#result");
                	result.html(data);
                },
                error: function () {
	                alert("error");
	            }
			});
		}
	</script>
</body>

결과

- Array

Controller

@RestController
@RequiredArgsConstructor
public class HomeDataController {
	
	@PostMapping("/test/sendData")
	public String sendData(int[] intArray, String[] strArray, String str) {
		return "return: intArray[1]: " + intArray[1]
			+ ", strArray[0]: " + strArray[0]
			+ ", str: " + str;
	}
}

 

HTML

<body>
	<div>
		<input id="stringData" type="text" placeholder="보낼 데이터 입력"><br>
		<input id="numberData" type="number" placeholder="보낼 숫자 입력">
		<button onclick="send()">보내기</button>
		<div><b id="result">받은 데이터 결과 </b></div>
	</div>
	
	<script>
		function send() {
			var str = $("#stringData").val();
			var n = $("#numberData").val();
			
			var strArr = new Array();
			strArr.push(str);
			strArr.push("B");
			strArr.push("C");
			
			var intArr = new Array();
			intArr.push(100);
			intArr.push(n);
			intArr.push(300);
			
			$.ajax({
                type: "POST",
                url: "/test/sendData",
                traditional: true,	// 추가. 매개변수 전송방식 변경
                data: {
                	intArray: intArr,
                	strArray: strArr,
                	str: "anyString"
                },
                success: function(data) {
                	var result = $("#result");
                	result.html(data);
                },
                error: function () {
	                alert("error");
	            }
			});
		}
	</script>
</body>

ajax 에 traditional: true 추가.

 

결과

- List DTO

SendDataDTO

@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public class SendDataDTO {
	private String str;
	private int number;
}

 

SendDataDTOWrapper

@Getter
@Setter
@NoArgsConstructor
public class SendDataDTOWrapper {
	List<SendDataDTO> list;
}

 

Controller

@RestController
@RequiredArgsConstructor
public class HomeDataController {
	
	@PostMapping("/test/sendData")
	public String sendData(@RequestBody SendDataDTOWrapper list, String str) {
		return JSONObject.quote("return: List[1].str: " + list.getList().get(1).getStr() 
				+ ", List[1].number: " + list.getList().get(1).getNumber());
	}
}

 

HTML

<body>
	<div>
		<input id="stringData" type="text" placeholder="보낼 데이터 입력"><br>
		<input id="numberData" type="number" placeholder="보낼 숫자 입력">
		<button onclick="send()">보내기</button>
		<div><b id="result">받은 데이터 결과 </b></div>
	</div>
	
	<script>
		function send() {
			var str = $("#stringData").val();
			var n = $("#numberData").val();
			
			var list = new Array();
			var data = {
					str: "A",
					number: 10
			}
			list.push(data);
			
			data = {
					str: str,
					number: n	
			}
			list.push(data);
			
			$.ajax({
                type: "POST",
                url: "/test/sendData",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({'list': list}),
                success: function(data) {
                	var result = $("#result");
                	result.html(data);
                },
                error: function () {
	                alert("error");
	            }
			});
		}
	</script>
</body>

dataType, contentType 명시, JSON.stringify() 를 이용하여 JSON 문자열로 변환.

 

결과

'Web > Spring Boot' 카테고리의 다른 글

Spring Boot Server-Sent Events(SSE) 실시간 이벤트  (0) 2023.10.29
jsch 오류 com.jcraft.jsch.JSchException: Algorithm negotiation fail  (0) 2023.10.20
JPA 데이터베이스 초기화 전략  (0) 2021.07.02
Controller Get, Post 오류  (0) 2020.12.02
Schema-validation Exception  (0) 2020.12.02
'Web/Spring Boot' Related Articles more
Comments