我正在尝试将 JQuery Full Calendar 与 Spring MVC + 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>
其 String 参数为 "undefined=undefined" 的 Java 控制器:
@RequestMapping(value = "/vacation/setVacation", method = RequestMethod.POST)
public
@ResponseBody
String setVacation( @RequestBody String response) {
//Rest of code
}
我已经改变了一点我的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 String 发布到控制器,然后我可以继续我需要的东西。什么让我很生气,现在日历被渲染为空而没有我在初始化时传递的事件。但是,为了呈现日历数据,我做了一个小改动,正如上面评论中提到的那样。通过这种方式,每当我尝试发布 json String 时,都会收到以下错误:“Uncaught TypeError: Converting circular structure to JSON”。我做了很多试验,但我仍然有提到的问题!任何人都知道那里发生了什么!