使用SpringMVC的JQuery完整日历。。无法将日历数据发送到控制器_Jquery_Json_Spring Mvc_Fullcalendar_Freemarker

使用SpringMVC的JQuery完整日历。。无法将日历数据发送到控制器

jquery json spring-mvc fullcalendar

使用SpringMVC的JQuery完整日历。。无法将日历数据发送到控制器,jquery,json,spring-mvc,fullcalendar,freemarker,Jquery,Json,Spring Mvc,Fullcalendar,Freemarker,我正在尝试使用JQuery完整日历和SpringMVC+Freemarker 我做了一个类似的演示目标：我需要将刚刚放入的日历数据发送到控制器来处理它问题：当我将数据发送到控制器时，我在控制器上接收到的字符串参数为undefined=undefined 免费标记： [#ftl /] <script type="text/javascript"> var calendar; var calendarData; function sendDataViaAjax

我正在尝试使用JQuery完整日历和SpringMVC+Freemarker

我做了一个类似的演示

目标：我需要将刚刚放入的日历数据发送到控制器来处理它

问题：当我将数据发送到控制器时，我在控制器上接收到的字符串参数为undefined=undefined

免费标记：

[#ftl /]
<script type="text/javascript">
    var calendar;
    var calendarData;
    function sendDataViaAjax() {
         $.ajax(
            {
              url:"[@spring.url '/vacation/setVacation'/]",
              type: "POST",
              data: calendarData,
              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>
<style type='text/css'>


    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    }

    #calendar {
        width: 900px;
        margin: 0 auto;
    }

</style>
<body>
<div id='calendar'></div>

<button value="Test" onclick="sendDataViaAjax()"
</body>

我对我的freemarker做了一些更改，如下所示：

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

    function doAjax() {
        var test = JSON.stringify(calendarData);

        $.ajax(
        {
            url:"[@spring.url '/vacation/setVacation'/]",
            type: "POST",
            data :test ,
            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]   //To allow Calendar to render data ,I use events:data instead
            });
            calendarData = data;
        });
    });


</script>

通过这种方式，我可以将json字符串发布到控制器，并从那里继续我需要的内容。现在日历呈现为空，而没有初始化时传递的事件，这让我很痛苦。但是，为了呈现日历数据，我做了一个小的更改，如上面的评论所述。通过这种方式，每当我尝试发布json字符串时，就会出现以下错误：uncaughtTypeError：将循环结构转换为json。我做了很多尝试，但我仍然有提到的问题！！

任何人都知道那里发生了什么

我能想到的一些有助于你解决的事情是

请使用警报或firebug检查变量日历的值。这就是您期望的值。您可以尝试REST模式PUT的另一个选项，而不是ajax POST，并在控制器中对其进行更改。您可以尝试将RequestParam注释与RequestBody一起使用。

谢谢你的回复，我已经试过了。1-未定义日历的值。2-我使用PUT时得到了相同的结果。这里的问题是我需要将日历对象发送到控制器。问题是为什么日历变量是未定义的，尽管它是一个全局变量！！我看到了你的演示页面的html。请尝试将脚本部分移到html代码之后。我认为脚本是在页面呈现之前执行的。这只是一个尝试。您粘贴在这里的代码与演示页面中的代码不同。我认为日历是一个div。我认为posting元素应该在html中的表单下，而且div不是html中要为表单发布的有效元素。能否尝试将日历变量的值设置为隐藏输入，并将此输入的值传递给您的post调用。我已对freemarker进行了一些修改。请查看我的代码更新。现在我需要传递的对象是calendarData，它有数据，但是当我尝试发送到控制器时，我通过控制台得到的问题是Uncaught RangeError：最大调用堆栈大小超过了我需要传递的所有json字符串！！你知道如何只发送json字符串而不是发送导致异常的整个对象吗！！

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

    function doAjax() {
        var test = JSON.stringify(calendarData);

        $.ajax(
        {
            url:"[@spring.url '/vacation/setVacation'/]",
            type: "POST",
            data :test ,
            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]   //To allow Calendar to render data ,I use events:data instead
            });
            calendarData = data;
        });
    });


</script>