JSON 정렬

개요

JSON 정렬에 대해서 알아보자.

EX

캘린더 스케쥴을 클릭 할 시에 해당 스케쥴을 상세정보를

AJAX통신을 통해서 가져와서 레이어팝업에 보여줘야한다.

 
    /**
      * @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());
        }
    }

@ResponseBody 를 선언함으로써 AJAX 통신을 하게끔 세팅을 한다.

return type은 void로 한다.

@ModelAttribute로 view 페이지 내에 있는 name 값의 CalendarVO 객체를 가져온다.

calendarVo 변수명에 getCalendarService를 담아준다.

JSON array에 calendarno(pk)값을 인식하여 해당 정보를 담는다.

        <!-- 레이어팝업 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