[Spring] AJAX VO Controller to JSP (AJAX VO객체를 Controller에서 JSP로 보내기)

구독 결제내역 리스트 페이지를 구현하는 중에,

리스트 중 하나를 클릭하면 해당 리스트의 상세 정보를 AJAX로 가져온 후 모달창에 출력하는 기능에 대해 고민을 했다.

새로운 페이지로 forward와는 다른 방식이다!

 

AJAX 방식으로 비동기 통신할 때, JSON객체를 Controller에서 JSP로 어떻게 보내야할까?

JSONObject

JSONObject객체를 사용하면 된다. 아래 예시를 보자.

컨트롤러에서 info 라는 이름으로 VO객체를 JSP로 보낸다.

JSONObject job = new JSONObject();
job.put("paid_at", sb.getPaid_at());
job.put("paid_amount", sb.getPaid_amount());
job.put("merchant_uid", sb.getMerchant_uid());
job.put("subType", sb.getSubType());

...

resp.setContentType("text/html; charset=utf-8"); 
PrintWriter out = resp.getWriter();
// json 객체를 문자열로 변환
out.print(job.toString());

 

JSP에선 info Object를 받아서 모달창 내부 content에 append() 해준다.

// 구독권 결제 상세 내용 ajax로 가져오기
let url = "${pageContext.request.contextPath}/sub/subPayInfo";
let query= "imp_uid="+imp_uid;

const fn = function(info) {
	var html_content = '';
 	html_content += '<div class="modal-paid_at">구독일: '+info.paid_at+'</div>';
 	html_content += '<div class="modal-merchant_uid">구독 번호: '+info.merchant_uid+'</div>';
	...
    $("#subPayInfoModalContent").empty();
	$("#subPayInfoModalContent").append(html_content);
}

// ajax를 간편하게 사용하도록 정의한 사용자 정의 함수
ajaxFun(url, "post", query, "json", fn);