$.ajax 在使用 fullcalendar js 时不工作？

Question

我正在使用 Smart Admin Theme and currently I am trying to work with the calendar 页面。

日历的基本功能已经定义好，可以使用了。可以在地图上创建和删除新事件。

我正在研究这些事件的持久性，我目前正在努力将丢弃在地图上的事件存储在数据库中。定义了在日历上呈现事件的 drop 方法，我对其进行了一些修改，以向服务器发送 ajax 请求以存储事件。

这是原始版本：

drop: function (date, allDay) { // this function is called when something is dropped

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');

    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
    }

},

这是我使用 ajax 调用的方法版本：

drop: function (date, allDay) { // this function is called when something is dropped

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');

    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

    $.ajax({
        type: 'POST',
        url: '/events',
        data: copiedEventObject,
        success: function(response){
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    });

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
    }

},

我收到一条错误消息：

TypeError: a is undefined

这个错误是我的 moment.js 库产生的。

我尝试在我的 ajax 调用中注释掉几行，似乎是这样的行：

data: copiedEventObject,

是负责人，因为我注释掉的时候，ajax调用成功了，但是我不明白为什么。

也试过了：

data: {
    title: copiedEventObject.title,
    description: copiedEventObject.description,
    class: copiedEventObject.className,
    start: copiedEventObject.start,
    end: copiedEventObject.end,
    icon: copiedEventObject.icon
},

遇到同样的错误。评论它 start。再次正常工作。

Chrome 有一个更详细的错误：

Uncaught TypeError: Cannot read property 'month' of undefined

Answer 1

尝试将数据属性更改为 corect json:

data: JSON.stringify(copiedEventObject);

Answer 2

最终我不得不从复制的 EventObject 中取出数据并手动创建一个数据对象来发出请求。

$.ajax 在使用 fullcalendar js 时不工作？

$.ajax not working while working with fullcalendar js?

javascript

ajax

jquery

fullcalendar