-
JSON 정렬Web (Spring ) 2016. 9. 19. 10:36
개요
JSON 정렬에 대해서 알아보자.
EX
캘린더 스케쥴을 클릭 할 시에 해당 스케쥴을 상세정보를
AJAX통신을 통해서 가져와서 레이어팝업에 보여줘야한다.
12345678910111213141516171819202122232425262728293031/*** @Method Name : calendarView* @작성일 : 2016. 9. 7.* @작성자 : BIN* @변경이력 :* @Method 설명 : 스케쥴 상세보기* @return*/@RequestMapping(value="/calendar/view.do")public @ResponseBody void calendarView(@ModelAttribute("calendarVo")CalendarVO calendarVo,Model model,HttpServletResponse response){try{response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();calendarVo = calendarService.getCalendarSchdule(calendarVo); //스케쥴번호를 기준으로 스케쥴 상세보기JSONArray jsonArray = new JSONArray();jsonArray.add(calendarVo);out.println(jsonArray);}catch(Exception e){System.out.println(e.toString());}}cs @ResponseBody 를 선언함으로써 AJAX 통신을 하게끔 세팅을 한다.
return type은 void로 한다.
@ModelAttribute로 view 페이지 내에 있는 name 값의 CalendarVO 객체를 가져온다.
calendarVo 변수명에 getCalendarService를 담아준다.
JSON array에 calendarno(pk)값을 인식하여 해당 정보를 담는다.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970<!-- 레이어팝업 js --><script type="text/javascript">function layer_open(el, calNo){//json array ajax view$.ajax({url : "/calendar/view.do",type : "POST",data : { calendarno : calNo, },dataType : "json",success : function(data) {// alert(data[0].calendarno);var html = "";html += "<b>일정제목:</b>"+data[0].calendarname +"<br/>";html += "<b>일정내용:</b>"+data[0].calendarcont +"<br/>";html += "<b>시작일:</b>"+data[0].calendarbegindate +"<br/>";html += "<b>종료일:</b>"+data[0].calendarenddate +"<br/>";html += "<b>장소:</b>"+data[0].calendarplace +"<br/>";html += "<b>URL:</b>"+"<a href="+"http://"+ data[0].calendarurl+" target=_blank + >" + "http://" + data[0].calendarurl + "</a>" + "<br/>";html += "<div class=\"btn-r\">";html += "<a href=\"#\" class=\"cbtn\">닫기</a>";html += "</div>";$(".pop-conts").html(html);var temp = $('#' + el); //아이디var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수if(bg){$('.layer').fadeIn(); //'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다.}else{temp.fadeIn();}// 화면의 중앙에 레이어를 띄운다.if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');else temp.css('top', '0px');if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');else temp.css('left', '0px');temp.find('a.cbtn').click(function(e){if(bg){$('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다.}else{temp.fadeOut();}e.preventDefault();});$('.layer .bg').click(function(e){ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러$('.layer').fadeOut();e.preventDefault();})},error : function(request, status, error) {alert(error);alert("서버 통신에 실패하였습니다.");}});}</script>매개변수로 calendarno를 가져온다.
ajax data type는 json
success일 시에는 layer popup 내에 html을 그려준다.
Result
'Web (Spring )' 카테고리의 다른 글
selectkey return 값이 '1'일 경우 (0) 2016.09.19 Escape Sequence 문자 (0) 2016.09.19 Ajax form.Serialize 안먹힐때 (0) 2016.09.02 [MVC게시판] 게시판 글 수정&삭제 (0) 2016.08.19 [MSSQL] SPRING + MAVEN + MSSQL 연동방법 (0) 2016.08.19