使用Javascript为CakePHP创建数据数组
Create Data array for CakePHP using Javascript
在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应用程序? 相关文章:
- 使用数据数组创建多个类似组件
- WebAudio API数据数组大小
- Jquery 循环一次或在数据数组中显示一次数据
- Cakephp 访问不在模型数据数组上的输入
- 使用来自 Ajax 响应的 JSON 数据数组
- Angular JS(离子)数据数组到$scope元素
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 如何使用for循环语句通过Ajax发送大数据数组
- 压缩 JS 中的数据数组
- 传递的参数D3提示回调是完整的数据数组
- 如何在数据数组的每次迭代中创建一个内容为“i+1”的新 HTML 元素
- 在 laravel 4 上使用循环将数据数组存储到单个数组中
- 为什么它说输入数据数组的格式不正确 jqchart.
- Javascript - 使用变量 RegExp 匹配数据数组中的多个关键字
- 尝试将数据数组设置为从视图调用函数后$scope
- 如何在 PHP 中创建 jqplot 数据数组
- 如何使用该数据数组从左向右移动画布
- 如何根据数字列从 Parse 中对数据数组进行排序
- 为什么 php json 响应不会将数据数组发送回 ajax jquery 请求
- 如何将内容添加到 JQuery Flot 图表数据数组工具提示