如何通过 dragging/dropping JavaScript 和 PHP 中的外部事件更新数据库中的事件?
How to update an event in the database by dragging/dropping an external event in JavaScript and PHP?
我正在使用完整日历 JavaScript 库开发日历。我已经准备好前端,但我不确定如何在数据库中删除事件数据后将其更新到日历上。我是 JavaScript 的新手,我已经提到了一些类似的问题,但没有得到我正在寻找的东西。
这是我的代码:
**index.php**
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
** main.js**
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
drop: function(info) {
if (checkbox.checked) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
});
calendar.render();
});
**add_event.php**
require 'database.php';
echo $_POST['title'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sqlInsert = "INSERT INTO Events (title, start, [end]) VALUES (:title, :start, :end)";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':title', $title);
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
if ($stmt->execute()) {
$conn->commit();
return true;
} else {
$conn->rollback();
return false;
}
这是我提到的密码的 link:https://fullcalendar.io/docs/external-dragging-demo
我只是不确定如何将 javascript 到 link 插入函数。所以当事件被删除时,它应该被保存在数据库中。
您需要在 fullCalendar 中处理 eventReceive
回调。这将为您提供掉落物品的相关事件数据。然后,您可以使用 AJAX 将该数据发送到 add_event.php
。有关回调的更多详细信息,请参阅 https://fullcalendar.io/docs/eventReceive。
像这样的东西应该可以工作:
eventReceive: function( info ) {
//get the bits of data we want to send into a simple object
var eventData = {
title: info.event.title,
start: info.event.start,
end: info.event.end
};
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('add_event.php', {
method: 'POST',
headers: {'Accept': 'application/json'},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
注意:我使用了现代 fetch() 函数来执行 AJAX 调用,而不是旧的 XmlHttpRequest 或任何依赖 jQuery 或其他外部库的函数.
下面是上述代码使用的 encodeForm 函数的代码(创意归功于 this site):
const encodeFormData = (data) => {
var form_data = new FormData();
for ( var key in data ) {
form_data.append(key, data[key]);
}
return form_data;
}
演示:
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
eventReceive: function(info) {
//get the bits of data we want to send into a simple object
var eventData = {
title: info.event.title,
start: info.event.start,
end: info.event.end
};
console.log(eventData);
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('add_event.php', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
});
calendar.render();
});
const encodeFormData = (data) => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
return form_data;
}
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
P.S。正如我在上面的评论中提到的,您还应该紧急修复 PHP 代码中的 SQL 注入漏洞。
我正在使用完整日历 JavaScript 库开发日历。我已经准备好前端,但我不确定如何在数据库中删除事件数据后将其更新到日历上。我是 JavaScript 的新手,我已经提到了一些类似的问题,但没有得到我正在寻找的东西。
这是我的代码:
**index.php**
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
** main.js**
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
drop: function(info) {
if (checkbox.checked) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
});
calendar.render();
});
**add_event.php**
require 'database.php';
echo $_POST['title'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sqlInsert = "INSERT INTO Events (title, start, [end]) VALUES (:title, :start, :end)";
$stmt = $conn->prepare($sqlInsert);
$stmt->bindParam(':title', $title);
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
if ($stmt->execute()) {
$conn->commit();
return true;
} else {
$conn->rollback();
return false;
}
这是我提到的密码的 link:https://fullcalendar.io/docs/external-dragging-demo 我只是不确定如何将 javascript 到 link 插入函数。所以当事件被删除时,它应该被保存在数据库中。
您需要在 fullCalendar 中处理 eventReceive
回调。这将为您提供掉落物品的相关事件数据。然后,您可以使用 AJAX 将该数据发送到 add_event.php
。有关回调的更多详细信息,请参阅 https://fullcalendar.io/docs/eventReceive。
像这样的东西应该可以工作:
eventReceive: function( info ) {
//get the bits of data we want to send into a simple object
var eventData = {
title: info.event.title,
start: info.event.start,
end: info.event.end
};
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('add_event.php', {
method: 'POST',
headers: {'Accept': 'application/json'},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
注意:我使用了现代 fetch() 函数来执行 AJAX 调用,而不是旧的 XmlHttpRequest 或任何依赖 jQuery 或其他外部库的函数.
下面是上述代码使用的 encodeForm 函数的代码(创意归功于 this site):
const encodeFormData = (data) => {
var form_data = new FormData();
for ( var key in data ) {
form_data.append(key, data[key]);
}
return form_data;
}
演示:
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
eventReceive: function(info) {
//get the bits of data we want to send into a simple object
var eventData = {
title: info.event.title,
start: info.event.start,
end: info.event.end
};
console.log(eventData);
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('add_event.php', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
});
calendar.render();
});
const encodeFormData = (data) => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
return form_data;
}
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
P.S。正如我在上面的评论中提到的,您还应该紧急修复 PHP 代码中的 SQL 注入漏洞。