데이터를 파싱하는 여러가지 방법중에서 Map 인터페이스를 이용하거나, 직관적으로 데이터를 관리하는 Dto클래스를 이용하는 방법을 예제를 통해서 실습해보려한다. (비동기통신을 활용)
첫번째는 Map을 방법으로써 먼저 id,pw를 입력할 화면을 불러올 ApiController.java을 구현한다.
package com.cos.controllerdemo.controller;
@Controller
public class ApiController {
@GetMapping("/ajaxtest")
public String test() {
System.out.println("test");
return "ajaxTest";
}
}
localhost:8080/ajaxtest 로 ajaxTest.jsp 호출. ajaxTest.jsp는 아래와 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#btn').click(function() {
alert("전송버튼 클릭");
member();
});
});
function member() {
alert("member함수 실행됨");
var sendIdPw = {
id : $('#id').val(),
pw : $('#pw').val()
}
$.ajax({
url : "/ajaxTest", // 요청 보낼 url 주소
type : "post", // 요청할 타입
data : JSON.stringify(sendIdPw), // 서버에 전송할 데이터 string타입으로 보낸다
contentType : "application/json; charset=utf-8", // request에 실어보내는 데이터(body)타입
dataType : "json", // 서버로부터 수신할 데이터타입
success : function(data) {
alert("callback 함수실행");
$(".idClass").append(data.id);
$(".pwClass").append(data.pw);
$(".emailClass").append(data.email);
},
error : function(errorThrown) {
alert("실패");
}
});
}
</script>
id : <input type="text" id="id"> <br>
pw : <input type="text" id="pw"> <br>
<button type="button" id="btn">전송</button> <br>
<hr color="red">
<div>
id : <span class="idClass"></span> <br>
pw : <span class="pwClass"></span> <br>
email : <span class="emailClass"></span>
</div>
</body>
</html>
id, pw를 입력하고 전송 버튼을 누르면 member()함수가 실행되며 json(key, value) 형태로 ApiController.java의 @PostMapping("/ajaxTest") url주소로 값을 보낸다
package com.cos.controllerdemo.controller;
import java.util.HashMap;
@Controller
public class ApiController {
@PostMapping("/ajaxTest")
@ResponseBody
public Map<String, Object> ajaxTest(@RequestBody Map<String, Object> paramap) {
System.out.println("Map으로 받기 성공");
paramap.put("email", "minbo2002@gmail.com");
System.out.println("paramap : " + paramap);
return paramap;
}
}paramap 매개변수의 .put( ) 메서드를 이용해서 key값으로 email을 value값으로 minbo2002@gmail.com을 추가로넣고 paramap을 return해주면
testPage.jsp에서 callback함수로 data매개변수에 (key, value) 형식으로 수신된다.
ex) id : kmb , pw : 1234 를 입력후 전송버튼을 누르면 결과는 다음과 같다. (페이지이동이 일어나지 않음)
두번째로는 UserDto를 활용한 방법으로서 먼저 UserDto 클래스를 만들고
package com.myspring.myapp.dto;
import lombok.Data;
@Data
public class UserDto {
private String id;
private String pw;
private String email;
}ajaxTest.jsp 내의 url을 /ajaxTest2 로 설정하여 id, pw 입력하고 전송 버튼을 누른다.
member()함수가 실행되며 json(key, value) 형태로 ApiController.java의 @PostMapping("/ajaxTest2") url 주소로 값을 보낸다.
package com.cos.controllerdemo.controller;
import java.util.HashMap;
@Controller
public class ApiController {
@PostMapping("/ajaxTest2")
@ResponseBody
public UserDto ajaxTest2(@RequestBody UserDto userDto) {
System.out.println("UserDto로 받기 성공");
System.out.println("userDto : " + userDto);
userDto.setEmail("minbo2002@gmail.com");
return userDto;
}
}userDto 매개변수의 .setEmail로 minbo2002@naver.com 값을 넣어주고 userDto를 return하면
testPage.jsp에서 callback함수로 data매개변수에 (key, value) 형식으로 수신된다.
ex) id : kmb2 , pw : 4321 를 입력후 전송버튼을 누르면 결과는 다음과 같다. (페이지이동이 일어나지 않음)
