Post the new events to the backend controller

问题

I am trying to use JQuery Full Calendar along with Spring MVC.

I have made a demo like that.

Target: I need to send the UPDATED calendar's data,after I enter my events, to the controller to handle it.

Issue: I've succeded to re-send the calendar I've inistialzed to the controller. However,I can't send the updated calendar's data,after I enter my events, to the controller to handle it.

Freemarker:

<script type="text/javascript">
    var calendar;
    var calendarData;        

    function doAjax() {
        var test = JSON.stringify(calendarData, censor(calendarData));
          var x=$('#calendar').value;
        $.ajax(
        {
            url:"[@spring.url '/vacation/setVacation'/]",
            type: "POST",
            data :x ,
            dataType: "json",
            contentType: "application/json"
        });
    }

    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $.getJSON('[@spring.url '/vacation/getVacation'/]', function (data) {
            calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                                true // make the event "stick"
                                );
                    }
                    calendar.fullCalendar('unselect');
                },
                editable: true,
                events:data
            });
            calendarData = data;
        });
    });   

</script>

回答1:

In order to achieve what I need,I've made a workaround. The workaround is based on building a json object and send it to the controller. If the user enters new events into the calendar ,I append these events to the previous old saved events.

Note:I've discovered that Stringify changes the date as mentioned and solved here:JSON Stringify changes time of date because of UTC

Freemarker:

<script type="text/javascript">
    var resourceVacation;

    function censor(censor) {
        return (function() {
            var i = 0;
            return function(key, value) {
                if (i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
                    return '[Circular]';                   

                ++i; // so we know we aren't using the original object anymore

                return value;
            }
        })(censor);
    }


    function doAjax() {

        $.each(resourceVacation, function(index) {
            var tmpDate = resourceVacation[index].start;
            tmpDate.setHours(tmpDate.getHours() - tmpDate.getTimezoneOffset() / 60);
            resourceVacation[index].start=tmpDate;

        });
//        var arrays = [
//            {"id":111,"title":"event1","start":"2012-04-15T22:00:00.000Z","url":"http://yahoo.com/"}
//        ];
//        var objects = {"id":111,"title":"event2","start":"2012-04-16T22:00:00.000Z","url":"http://yahoo2.com/"};
//
//        arrays.push(objects);
        var test = JSON.stringify(resourceVacation, censor(resourceVacation));
        var x = test;
        $.ajax(
        {
            url:"[@spring.url '/vacation/saveResourceVacation'/]",
            type: "POST",
            data :x ,
            dataType: "json",
            contentType: "application/json"
        });
    }


    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $.getJSON('[@spring.url '/vacation/loadResourceVacation'/]', function (data) {
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable: true,
                selectHelper: true,
                select:
                        function(start, end, allDay) {
                            var title = prompt('Event Title:');

                            if (title) {
                                start.setHours(start.getHours() - start.getTimezoneOffset() / 60);
//                                var dat=$.fullCalendar.formatDate( start, "yyyy/MM/dd")


                                var newVacation= {id:133,title:'title',start:start,url: 'title'};
                                resourceVacation.push(newVacation);
                                calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                        true // make the event "stick"
                                        );
                            }
                            calendar.fullCalendar('unselect');
                        },

                editable: true,
                events:data
            });
            resourceVacation = data;
        });
    });


</script>

Controller:

     @RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET)
        public
        @ResponseBody
        String loadResourceVacation(HttpServletResponse response) throws Exception {


            //Here I build my vacationFormBean
            List<VacationFormBean> vacationFormBeanList= buildVacationFormBean();
            // Convert to JSON string.
            String json = new Gson().toJson(vacationFormBeanList);

            // Write JSON string.
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");       

        return json;
    }

    @RequestMapping(value = "/vacation/saveResourceVacation", method = RequestMethod.POST)
    public
    @ResponseBody
    void saveResourceVacation(@RequestBody String jsonString, Principal principal) throws Exception {
        List<String> resourceVacations = extractVacationDatesFromJsonObject(jsonString);

    }

VacationFormBean:

public class VacationFormBean {
    int id; // (With Setter & Getter)
    String title; // (With Setter & Getter)
    String start;  // (With Setter & Getter)
    String url; // (With Setter & Getter)
}

来源：https://stackoverflow.com/questions/10164577/post-the-new-events-to-the-backend-controller