Question

无法在Javascript中以正确的Cakephp格式获取数据数组。我正在使用Fullcalendar创建一个调度日历，我已经将事件加载到一个数组中。

外部事件是用户从另一个div拖到日历上并且他们传输他们的名字和userId。接下来，初始化日历，当用户被放到日历上时，用户将显示在日历上并添加到 arrayOfEvents 。这是我们正在使用的变量。

$(document).ready(function() { 
    /* initialize the external events -----------------------------------------------------------------*/
    $('#external-events div.external-event').each(function() {
        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()), // use the element's text as the event title
            userId: this.id
        };
        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
    /* initialize the calendar-----------------------------------------------------------------*/   
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        editable: true,
        events: [
            <?php foreach ($users as $user) { foreach ($user['Event'] as $event): ?>
            {
                start: '<?php echo $event['start_date']; ?>',
                end: '<?php echo $event['end_date']; ?>',
                title: '<?php echo $event['title']; ?>',
                allDay: false,
                color: '#077169'
            },
            <?php endforeach; } ?>
        ],
        droppable: true, // this allows things to be dropped onto the calendar !!!
        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.end = (date.getTime() + 3600000) / 1000; // default shift length is 1 hour
            copiedEventObject.userId = originalEventObject.userId;
            copiedEventObject.allDay = false;
            // 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);
            // Push events into array
            arrayOfEvents.push(copiedEventObject); 
            console.log(arrayOfEvents);
        }
    });
});  // End document ready
var arrayOfEvents = [];
var data = {};

function updateSchedule() { // Function clicked on in link to send arrayOfEvents to controller to add to database
    // You can get all events out of the array here
    for (var i = 0; i < arrayOfEvents.length; i++) {
        var event = arrayOfEvents[i];
        data += "Event" + i
                + "&user_id=" + event.userId
                + "&start_date=" + event.start
                + "&end_date=" + event.end
                + "&title=" + event.title;
    }
    // Make your ajax post here
    $.ajax({
        type: "POST",
        url: "<?php echo $this->webroot; ?>events/add",
        data: data,
        success: function(response) {
            alert('done!');
        },
        fail: function(response) {
            alert("error");
        }
    });
}

updateSchedule 函数与onClick事件绑定，并且正在提交到视图，但格式不正确。我需要这个数组看起来像这样：

Array
(
    [Event] => Array
    (
        [0] => Array
        (
            [user_id] => 'value'
            [start_date] => 'value'
            [end_date] => 'value'
            [title] => 'value'
        ),
        [1] => Array
        (
            [user_id] => 'value'
            [start_date] => 'value'
            [end_date] => 'value'
            [title] => 'value'
        )
   )
)

目前它看起来像：

array(
    'Event' => 'Event0',
    'user_id' => '4',
    'start_date' => 'Tue Apr 30 2013 11:30:00 GMT-0400 (Eastern Daylight Time)',
    'end_date' => 'Tue Apr 30 2013 12:30:00 GMT-0400 (Eastern Daylight Time)',
    'title' => 'value'
)

我对如何将其更改为我想要的格式感到有点迷失。

Answer 1

看起来你需要在Javascript中表示结构是对象和数组的组合，然后将它输出到JSON。您的data变量应该构造为这样的对象：

var data = {};
for (var i = 0; i < arrayOfEvents.length; i++) {
    var event = arrayOfEvents[i],
        eventId = "Event" + i,
        eventData = {};
    if (!data[eventId]) data[eventId] = [];

    eventData['user_id'] = event.userId;
    eventData['start_date'] = event.start;
    eventData['end_date'] = event.end;
    eventData['title'] = event.title;

    data[eventId].push(eventData);
}

如果设置$.ajax，dataType: "json"调用可以处理将其转换为json：

$.ajax({
    type: "POST",
    url: "<?php echo $this->webroot; ?>events/add",
    data: data,
    dataType: "json",
    success: function(response) {
        alert('done!');
    },
    fail: function(response) {
        alert("error");
    }
 });

然后，控制器必须解码JSON字符串并将其转换为所需的PHP数组。请参阅此问题以了解如何进行设置：How do I handle json data sent as an HTTP Post to a cakephp app?

使用Javascript为CakePHP创建数据数组

1 个答案: