16주차 - Spring (12) ajax를 통해 데이터를 주고받아보자
2022. 10. 21. 19:47ㆍSpring framwork
이번의 목표
01. ajax로 데이터를 전달해보자.
02. ajax로 데이터를 받아보자.
지난 시간에는 ajax로 보내는 데이터는 없이 데이터를 받아오는 것을 연습해봤습니다.
이번에는 데이터를 전송하고 데이터를 받는 것을 연습해보겠습니다.
데이터를 전송한다는 부분이 추가 되었을 뿐이지 코드가 크게 달라지지 않기 때문에 비교를 하면서 보겠습니다.
데이터 전송은 send() 메서드에 매개변수로써 값을 담는 것으로써 가능합니다.
이때에 전송하는 데이터는 Request의 body에 담기게 되며 컨트롤러에서 이 데이터를 이용하게 됩니다.
데이터를 전송하는 것은 매개변수로 사용하면 손쉽게 해결이 되지만 컨트롤러에서는 조금 체크할 사항들이 있습니다.
전송된 데이터는 request의 body에 위치하는데, 컨트롤러에서 이 데이터를 쓰기 위해서는 사용하고자 하는데이터가 request의 body에 있다는 것을 명시해주어야합니다. 이때 사용하는 코드가 바로 @RequestBody입니다.
@RequestBody를 체크하지 않는다면 스프링에서는 값을 찾아오지 못해 null이 반환되게 됩니다.
01. 페이지 코드
02. 컨트롤러 코드
03. 실행 화면
01. 페이지 코드
<head>
<meta charset="UTF-8">
<title>ex02</title>
<script type="text/javascript">
var req;
function send() {
req = new XMLHttpRequest();
req.onreadystatechange = changeText
req.open('post','ex02')
var reqData = document.getElementById('reqData')
req.send(reqData.value)
}
function changeText() {
if(req.readyState==4 && req.status==200){
var print = document.getElementById('print')
print.innerHTML = req.responseText
}
}
</script>
</head>
<body>
<!-- 메서드의 매개변수 reqData와 id가 반드시 같을 필요는 없다.
매개변수 reqData가 되어줄 변수는 스크립트태그 안에서 만들어지는 var reqData이다. -->
<input type="text" id="reqData"><br>
<div id="print">출력 데이터</div>
<button type="button" onclick="send()">데이터 가져오기</button>
</body>02. 컨트롤러 코드
@GetMapping("ex02")
public String ex02Get() {
return "ajax/ex02";
}
@ResponseBody
@PostMapping(value="ex02", produces = "text/html; charset=UTF-8")
public String ex02Post(@RequestBody String reqData) {
return "서버의 응답 데이터 : " + reqData;
}03. 실행 화면
'Spring framwork' 카테고리의 다른 글
| 16주차 - Spring (14) 저장된 json 파일을 이용하여 테이블을 출력해보자 (0) | 2022.10.21 |
|---|---|
| 16주차 - Spring (13) Json을 이용하여 ajax를 사용해보자 (0) | 2022.10.21 |
| 16주차 - Spring (11) Json, Gson에 대해 알아보자 (0) | 2022.10.21 |
| 16주차 - Spring (10) Json, Gson을 사용하기 위한 환경 구축 (0) | 2022.10.21 |
| 16주차 - Spring (9) ajax에 대해 알아보자 (0) | 2022.10.21 |