[Spring/ajax] 회원 목록에서 이름 클릭 시 ajax로 회원 상세정보 불러오기

 

 

이런 건 재밌다 ㅎ 

 

 

이름을 a태그로 감싸서 이름 클릭할 때마다 회원 상세정보를 조회할 수 있도록 했다. 

 

 

 

문제 1) 클릭한 이름에 해당하는 사용자 정보의 데이터 받아오기

원래 이름 부분 a태그에 data-user-name 속성을 넣어서 

let username = $(this).attr("data-user-name");

을 작성해서 이름을 클릭할 때 사용자 이름을 획득할 수 있도록 했다. 

ajax로 사용자 이름을 넘겨서 그 사용자 정보를 조회하려고 했는데 생각해보니 username으로 사용자 정보를 찾는 sql문이 없었던 것이다. 새로 만들자니 username은 기본키도, 유니크키도 아니었고

이미 userId로 사용자 정보를 찾는 sql문과 controller, service에 이미 구현이 되어있는 상태였다. 

그래서 이름 a태그에 data-user-id 속성을 넣었다. 

그래서 사용자 아이디를 얻어서 ajax로 넘길 수 있게 되었다!

 

 

 

문제 2) a태그 클릭 이벤트 - 나타났다 금방 사라지는 현상

이름에 a태그를 걸어서 클릭 이벤트로 클릭한 행에 표시하고, ajax를 요청하려는데

잠깐 나타났다 금방 사라지기만 했다. 

a태그의 문제인 것 같아서 뭐때문일까 고민하다가 

a태그의 기본 이벤트가 생각났다. 

기본이벤트를 막아주니 문제 해결~~

 

 

 

 

문제 3) $.ajax방식, GET방식으로 데이터 가져오기

특정 사용자를 조회하는 ajax 방식 중

$.get()은 학원에서 배운 예시가 있었지만 get방식으로 $.ajax()를 쓰는 방법은 없었다. 

하고보니 간단한 거였지만 ㅠ ajax를 잘 이해 못한 채로 하려다보니

data를 어떻게 넘기고 어떻게 받는지 한참 1시간 좀 넘게 찾았다 ㅠ

이것저것 해본 결과

 

 

 

 

그 결과 아직 미완성이지만 ajax 값 넘어오는 지만 확인

 

 

 

 

 

 

일단 성공~~~~! 재밌다 ㅎㅎ 예쓰 

 

 

 

문제 4) ajax로 받아온 JSON 데이터를 날짜형식으로 바꾸기 

 

원래는 

<td><fmt:formatDate id="cell-user-birth" value="" pattern="yyyy-MM-dd" /></td>

이렇게 해서 자스에서 val(user.birth) 로 넣으려고 했더니, <fmt:formatDate /> 태그에서는 id를 쓸 수 없다는 오류 발생 

그럼 저 테이블의 값만 날짜형식으로 어떻게 바꾸지? 

서치 결과 그 대상 객체에서 @JsonFormat을 이용하는 것이었다 ㅠ 이거 배운건데!!

 

 

 

 

날짜형식으로 잘 바뀌었습니다 ㅎㅎ

 

 

문제 5) ajax를 이용해서 해당 사용자의 프로필 사진 전달받기 

- setAttribute가 아니라 attr을 쓴다는 점 !!! 

- "/resources/images/profile/${map.user.photo}"가 아니라  "/resources/images/profile/" + map.user.photo); 로 한다

 

$("#profile-img").attr("src", "/resources/images/profile/" + map.user.photo);

 

 

잘 넘어왔습니다 ㅎ 

 

 

 

문제 6) ajax를 이용해서 리스트 전달받기 

 

이 부분 쫌 어려웠다

회원권 테이블의 <td> 부분을 아예 지우고 내용을 새로 작성하는 방법

참고한 글 

https://okky.kr/articles/870761

 

 

일단 json으로 전달받을 데이터가 User객체와 membershipList 리스트이기 때문에 

컨트롤러에서 얘네를 map에 넣어줌

 

 

 

jsp의 테이블에서 <td>를 지워줌

 

 

 

map으로 전달받은 json 데이터 리스트를 꺼내고 

for(let index in List) 를 통해 하나씩 목록을 새로 작성한다