使用Javascript为CakePHP创建数据数组

Create Data array for CakePHP using Javascript

本文关键字:数据 数组 创建 CakePHP Javascript 使用      更新时间:2023-09-26

在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");
        }
    });
}
updatesschedule 函数与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'
)

我有点不知道如何把这个改成我想要的格式。

看起来您需要在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调用可以处理转换为json,如果你设置dataType: "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数组。看看这个问题来学习如何设置:我如何处理json数据作为HTTP Post发送到cakephp应用程序?