[JSP] 모달박스 데이터 넘어가는 과정

수업 듣다가 도저히 이해 안되는 부분이 있어서 분석해봤다.

(이해 안되는게 한두개가 아니지만..)

 

 

 

글 목록 화면에 제목 컬럼의 링크를 누르면 모달박스가 띄워지며 데이터가 넘어간다. 어떻게넘어갈까.

 

제목링크의 태그아이디는 "subject_${board.boardNum}" 이고, 링크 목적지는 #으로 걸려있다.

(목적지가 #인건 자바스크립트에서 처리한다는 뜻)

 

 

board.js 페이지를 열어보면

 

45번 : $(a[id^=subject_).click(function(e) // (e는 event 속기식임)

(a태그 중 id가 subject로 시작하는 선택자를 클릭했을 때 이벤트 발생 )

 

53번 : e.currentTarget.id는 이벤트 발생시킨 타겟의 id를 가져온다는 뜻

id 변수에 subject_${boardNum}이 담김

 

54번 : 순수 id값만 담기 위해 subject_ 자르기 위해 substring 함수 사용

 

id 변수 ajax의 data 값에 담김

 

62번 : 선언된 url을 통해 id변수 board/viewAjax.do로 넘김

post 형식, text타입으로 보냄,

 

get방식으로 보내도 됨

(get방식으로 보낼경우 url 링크에 board/viewAjax.do?boardNum=id) 이런식으로 작성됨)

 

담겨진 데이터는 viewAjax.do을 통해 BoardViewAjaxAction.java에서 처리하게됨

 

Action페이지

29번~ : boardNum 변수로 id를 받음

(스프링의 경우 requestParam 사용해도 ok)

 

55번~57번 : VO객체 생성하여 boardNum을 담는다.

57번 : boardNum을 통해 글번호에 해당하는 내용을 불러온다.

 

69번 : list객체변수에 다시 board변수 담고

 

jackson라이브러리를 통해 list변수를 String타입 변수인 json에 담고..

그걸 또 returnPath에 셋팅해서 리턴해준다.

 

그러면 json.jsp로 넘어가게 되고 그 값을 ajax에서 다시 받게된다

 

System.out.println으로 출력해보면 board.js에서 console.log(data) 찍었던 값과 동일하게 나옴

 

 

다시 ajax 문으로 돌아가서 받은 데이터를 처리하게 된다.

 

빨간박스 친 ajax 선언부 해석해보면

url과 type의 정보(클라이언트)로 controller에 있는 함수(서버)와 매칭이 되고,

서버에서 클라이언트 쪽으로 data가 제대로 전달됐으면 success 문이 실행된다.

 

그러면 function안에 있는 data변수에 값이 담기게 된다.

 

겁나 복잡하다..

 

애초에 ajax를 배운적이 없는데 저걸 어떻게 이해하라고 수업하신걸까..

 

스프링에서는 ResponseBody 어노테이션으로 좀더 간단하게 할 수 있는듯 하다.

 

 

직접 만들어보는게 실력 제일 빨리 느는 길이라고 하지만

내 생각엔 이론부터 튼튼히 하고 짜보는게 더 좋을거 같다.