为什么以下不将POST事件发送到我们的API？ 我们正在尝试使用完整日历制作可自定义日历，允许用户添加新活动，然后将活动发布到我们的API。一切正常，除了发布到我们的API的事件。有谁知道为什么会这样？很多，非常感谢！
<!DOCTYPE html>
<html>
<head>
<title>How to add calendar using jQuery and fullCalendar</title>
<!--FullCalendar Dependencies-->
<link href='https://www.findvolunteerships.com/fc/fullcalendar.css' rel='stylesheet' />
<link href='https://www.findvolunteerships.com/fc/fullcalendar.print.css' rel='stylesheet' media='print' />
<link rel="stylesheet" type="text/css" href="css/main3.css">
<link rel="stylesheet" type="text/css" href="css/main2.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<script src='fc/lib/moment.min.js'></script>
<script src='fc/lib/jquery.min.js'></script>
<script src='fc/fullcalendar.min.js'></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.0/fullcalendar.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src='http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://mandrillapp.com/api/docs/js/mandrill.js"></script>
<!--jQuery-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'></script>
<!--FullCalendar-->
<script src='https://www.findvolunteerships.com/fc/fullcalendar.min.js'></script>
<script type="text/javascript">
/*
jQuery document ready
*/
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/*
Initialize fullCalendar and store into variable.
Why in variable?
Because doing so we can use it inside other function.
In order to modify its option later.
*/
var calendar = $('#calendar').fullCalendar(
{
/*
header option will define our calendar header.
left define what will be at left position in calendar
center define what will be at center position in calendar
right define what will be at right position in calendar
*/
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
/*
defaultView option used to define which view to show by default,
for example we have used agendaWeek.
*/
defaultView: 'agendaWeek',
/*
selectable:true will enable user to select datetime slot
selectHelper will add helpers for selectable.
*/
selectable: true,
selectHelper: true,
/*
when user select timeslot this option code will execute.
It has three arguments. Start,end and allDay.
Start means starting time of event.
End means ending time of event.
allDay means if events is for entire day or not.
*/
select: function(start, end, allDay)
{
/*
after selection user will be promted for enter title for event.
*/
var title = prompt('Event Title:');
/*
if title is enterd calendar will add title and event into fullCalendar.
*/
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
/*
editable: true allow user to edit events.
*/
editable: true,
/*
events is the main option for calendar.
for demo we have added predefined events in json object.
*/
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</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>
<script type='text/javascript'>
function savedata(){
$(document).ready(function () {
$(function () {
$("#save").click(function () {
var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
alert(eventsFromCalendar);
$.ajax(
{
url: 'API LINK',
type: 'POST',
traditional: true,
data: { eventsJson: JSON.stringify(eventsFromCalendar) },
dataType: "json",
success: function (response) {
alert(response);
},
error: function (xhr) {
debugger;
alert(xhr);
}
});
});
});
});
}
</script>
</head>
<body>
<!--FullCalendar container div-->
<div id='calendar'></div>
</body>
</html>
答案 0 :(得分：0)
您的点击事件（以及包含它的document.ready事件）位于函数savedata中。我没有看到在任何地方被调用，即使它被调用，可能性就已经开始了。您需要删除该函数包装器。我也没有在你的样本中看到一个id为“save”的元素，但也许它会通过你们的一些外部代码添加。
另外，作为旁注，您要多次包含相同的库（其中一些是不同的版本）。那是......不好。