22.10.05 - [ Spring ] Ajax 활용 { 아이디 중복 체크, 숫자, json, 한글 인코딩 } + @RestController
-- INDEX --
| 1. 아이디 중복체크 | 2. ajax란? | 3. 숫자 타입 | 4.json 타입 | 5. 인코딩 | 6. @RestController |
| id입력한 값 얻어오기 | 클라이언트 측에서 받아오는 방식과 처리 방식이 다른 것. |
data{age:20} | Gson <dependency> |
produces() | 컨트롤러의 있는 모든 메서드의 리턴은 문자열 그대로 처리되었으면 한다. |
| 값 담아서 서버에 요청보내기 |
test2( String age ) | gson.toJson() | |||
| 응답받은 값으로 처리하기 |
Ajax활용
1. 아이디 중복확인 체크하기
1-1 : form전송 안되도록 – 타입:버튼으로 변경해주고 – onclick 이벤트 걸어주기
- flag 개념의 응답 결과 표시해놓을 input 태그도 만들어놓기
1-2 : <script> 태그에서 checkDup 메서드 만들어주기
- 서버한테 가서, 지금 입력한 id가 디비에 있는지 물어보고 응답받기
- 응답받아서, 표시해놓기
# ajax 호출해서 사용하기 $.ajax() ( ajax호출할때는 정보들 담아서 호출하기 ) #
이렇게 여러개의 data를 넘겨주어야 하는 상황에서는
object를 활용해서 { key:value } 형태로 전달
$.ajax({ })
# Check 1
- data는 key:value형태로 보내주어야 하므로 객체{} 형태로 보내준다.
- key값 자리에는 무조건 문자열이 오는 것이므로 “ ” 생략 가능
#Check 2
- success와 error 에는 동작이 들어온다 – 동작은 function으로 만들어 준다.
1-3 :ajax 요청 처리할 C-S-D : mapper 만들어주기
#컨트롤러 : ajax에서 넘겨주는 data의 key 값과 동일한 이름으로 받아야 한다! #
1-4 : 서버에서 응답받은 값 - 파라미터로 받아서 처리하기
1. 히든으로 해놓은 input 태그 가져오기
2. 함수의 파라미터로 서버의 응답 값 받기
3. 중복되지 않아서 결과가 0으로 오면 – 중복 여부 ‘x’ 로 설정해주기
1-5 : form 태그의 check() 메서드에 중복확인 체크 여부 추가해주기 + ajax 다듬기
onsubmit 속성 값이 false 면 <form> 태그 제출 안된다.
서버로부터 응답받은 data 가 0이라면 - db에 해당 id 없다는 것 = 사용 가능한 id
2. Ajax란?
- ajax는 view페이지 전체를 새로 고침 하는 것이 아니라
- 페이지에 string 문자열이나 숫자 조금 끼어넣는 용도로 사용하는 비동기 통신
# form 요청과 ajax 요청 비교 #
클라이언트 측에서 - 요청을 보내는 것은 같다.
서버측에서 - 응답하는 것도 같다.
클라이언트 측에서 - 받아오는 방식과 처리 방식이 다른 것.
기존 방식대로 밥상을 받아왔으면 view페이지 자체로 보여주는 것이고,
ajax방식으로 조그마한 그릇에 받아왔으면 view페이지 한쪽에 보여주어도 되고 안 보여주어도 되는 것
( 밥상 전체 바꾸는 것이 아닌 조그마한 그릇에 담아서 내 밥상에 추가해주거나 말거나 하는 것 )
( 아이폰으로 주문한 건지,, 갤럭시로 주문한 건지 서버는 신경 쓸 거 아니다. )
# 조그마한 그릇 == ajax에서 success() 의 파라미터
3. 숫자 데이터 타입 받아서 작업하기
4. json 타입 데이터 받아오기
- 서버로부터 json타입 data 받아오기
4-1 : pom.xml에 <dependency> 추가
4-2 : Gson 객체 만들고 toJson 메서드 사용
- vo 만들기 불편하니까 hashMap으로 진행
- Gson gson = new Gson();
- gson.toJson();
gson 도 자주 사용할 거 같으면 bean으로 등록해놓고 autowired 받아서 사용하면 된다.
단발성으로 한 번 사용할 것이라서 컨트롤러 만들어서 사용한 것이다.
4-3 : Json타입으로 잘 전달되어서 객체로 인식되나 확인해보기
5. Spring권장 인코딩 방식
5-1 : 우리가 해오던 한글 인코딩 방식 — resp 이용해서 했었다.
5-2 : spring이 권장하는 인코딩 방식 - produces
- @*Mapping에 파라미터 값 2개 이상 사용할 때는 어떤 값인지 표시해 주어야 한다.
- 파라미터 1개일 경우에는 value로 인식되지만, 2개 이상 사용할 때는 어떤 값인지 지정 필요
- produces = "text/plain"; charset=UTF-8"
6. @RestController
- 해당 컨트롤러의 있는 모든 메서드의 리턴은 문자열 그대로 처리되었으면 한다.
- 메서드 하나하나 @ResponseBody 해주는 것이 아닌
- 클래스에 @RestController 해주면 된다!
