FullCalendar Ajax 비동기 통신 events 생성

Script 옵션 코드

,events:function(info, successCallback, failureCallback){
    var url = "/SampleCalendarList";
    $.ajax({
        type: 'POST'
        ,cache: false
        ,url: url
        ,dataType: 'json'
        ,contentType : "application/x-www-form-urlencoded; charset=UTF-8"
        ,success: function(data){
            var events = [];
            console.log(data);
            if(data.pValue != null && data.pValue === 'private'){
                events.push({
                    title : data.title
                    ,start : data.start
                    ,end : data.end
                    ,color : 'red'
            });
        } else if (data.pValue != null && data.pValue === 'public') {
            events.push({
            title : data.title
            ,start : data.start
            ,end : data.end
            ,color : 'blue'
            });
        } else {
            events.push({
            title : data.title
            ,start : data.start
            ,end : data.end
            ,color : 'green'
            });
        }
        successCallback(events);
    }
});

Controller 코드

@ResponseBody
@RequestMapping(value = "SampleCalendarList")
public Map<String,Object> sampleCalanderList(final @RequestParam Map<String, Object> param
        , final HttpServletRequest request
        , final HttpServletResponse response
        , final ModelMap model
        ) throws Exception {
        System.out.println("캘린더 통신 성공");
        System.out.println(param);
        param.put("start", "2021-12-25");
        param.put("end", "2021-12-26");
        param.put("title", "2021-12-25");
        System.out.println(param);
    return param;
}

Map 컬렉션 객체 생성 후 에 put메서드를 통해 데이터를 담은뒤 return을 통해 map객체를 Ajax함수에 반환한다.

---

복수개의 map객체를 List에 담아 전송시 Ajax로 호출하는 코드이다

    @ResponseBody
    @RequestMapping(value = "sampleChartList")
    public List<Map<String,Object>> sampleChartList(final @RequestParam Map<String, Object> param
            , final HttpServletRequest request
            , final HttpServletResponse response
            , final ModelMap model
            ) throws Exception {
        System.out.println("캘린더 통신 성공");
        List <Map<String,Object>> paramList = new ArrayList<Map<String,Object>> ();
        Map <String, Object> param2 = new HashMap<String, Object>();
        param2.put("start", "2022-01-25");
        param2.put("end", "2022-01-26");
        param2.put("title", "2022-12-25");
        paramList.add(param2);
        param2 = new HashMap<String, Object>();
        param2.put("start", "2022-01-06");
        param2.put("end", "2022-01-08");
        param2.put("title", "ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        paramList.add(param2);
        System.out.println(paramList);
        return paramList;
    }

 map객체의 데이터를 {key=value} object 형태로 []배열에 담아 출력된다.

출력상에는 key와 value를 = 기호로 분기하였지만

내부적으로는 key:value와 같이 = 기호가 아닌 콜론 기호로 분기된다.

이때 쌍따옴표나 홑따옴표는 생략된다.

 

,events:function(info, successCallback, failureCallback){
    var url = "/SampleCalendarList";
    $.ajax({
        type: 'POST'
        ,cache: false
        ,url: url
        ,dataType: 'json'
        ,contentType : "application/x-www-form-urlencoded; charset=UTF-8"
        ,success: function(param){
            var events = [];
            console.log(param);
            $.each(param, function (index, data){
                console.log(data);
                if(data.pValue != null && data.pValue === 'private'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'red'
                    });
                }else if(data.pValue != null && data.pValue === 'public'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'blue'
                    });
                }else{
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'green'
                    });
                }
            })
            successCallback(events);
        }
    });
}

 

위 Ajax 코드에서 success에 넘겨받은 Data의 형태는 다음과 같다.

List는 컬렉션으로 배열의 형태와 같다.

따라서 자바스크립트로 넘겨받을때에는 배열의 형태로 넘겨받는다.

자바스크립트는 JSON형식으로 데이터를 관리한다.

따라서 자바의 List 배열형태 내부에 담겨있는 map형태의 key:value 쌍의 데이터는 key=value 형태로 담겨져있고

서버에서 클라이언트로 해당 object데이터를 넘기면 JSON형태의 key : 'Value' 형태로 변환되어 넘겨받는다. (콜론과 홑따옴표) 

 

서버단 데이터

[{start=2022-01-25, end=2022-01-26, title=2022-12-25}

, {start=2022-01-06, end=2022-01-08, title=ABCDEFGHIJKLMNOPQRSTUVWXYZ}]

 

스크립트 데이터

[{ 0: {start: '2022-01-25', end: '2022-01-06'}, {title: '2022-12-25'} }

,{ 1: {start:'2022-01-06', end:'2022-01-08', title:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'} }

 

param 배열에서 추출하기 전까지 param 배열 내에 담겨있는 객체 형태는

{ 0: {start: '2022-01-25', end: '2022-01-06'}, {title: '2022-12-25'} }와 같이

object를 index 값을 key로 지정하여 object로 한번 더 묶여있는것이다.

 

 

 $.each() 함수를 통해 param 배열에 있는 map 객체를 하나씩 꺼냄과 동시에 작업한다.

        ,success: function(param){
            var events = [];
            console.log(param);
            $.each(param, function (index, data){
                console.log(data);
                if(data.pValue != null && data.pValue === 'private'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'red'
                    });
                }else if(data.pValue != null && data.pValue === 'public'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'blue'
                    });
                }else{
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'green'
                    });
                }
            })
            successCallback(events);
        }

 

 

 

다음은 완성된 코드이다.

 

,events:function(info, successCallback, failureCallback){
    var url = "/SampleCalendarList";
    $.ajax({
        type: 'POST'
        ,cache: false
        ,url: url
        ,dataType: 'json'
        ,contentType : "application/x-www-form-urlencoded; charset=UTF-8"
        ,success: function(param){
            var events = [];
            console.log(param);
            $.each(param, function (index, data){
                console.log(data);
                if(data.pValue != null && data.pValue === 'private'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'red'
                    });
                }else if(data.pValue != null && data.pValue === 'public'){
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'blue'
                    });
                }else{
                    events.push({
                        title : data.title
                        ,start : data.start
                        ,end : data.end
                        ,color : 'green'
                    });
                }
            })
            successCallback(events);
        }
    });
}