如何通过拖放JavaScript和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;
    }

**index.php**

可拖动事件

我的活动1
我的活动2
我的活动3
我的活动4
我的活动5

落下后取出

**main.js**
document.addEventListener（'DOMContentLoaded'，function（）{
var Calendar=FullCalendar.Calendar；
var Draggable=FullCalendarInteraction.Draggable；
var containerell=document.getElementById（'external-events'）；
var calendarEl=document.getElementById（'calendar'）；
var checkbox=document.getElementById（'drop-remove'）；
新拖船（集装箱船{
itemSelector:“.fc事件”，
eventData:函数（eventEl）{
返回{
标题：eventEl.innerText
};
}
});
var calendar=新日历（calendarEl{
插件：['interaction'，'dayGrid'，'timeGrid']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
是的，
真的，
删除：功能（信息）{
如果（复选框。选中）{
info.draggedEl.parentNode.removeChild（info.draggedEl）；
}
},
});
calendar.render（）；
}); 
**add_event.php**
需要“database.php”；
echo$_POST['title']；
$title=$_POST['title']；
$start=$_POST['start']；
$end=$_POST['end']；
$conn=DB:：databaseConnection（）；
$conn->beginTransaction（）；
$sqlInsert=“插入事件（title，start，[end]）值（：title，：start，：end）”；
$stmt=$conn->prepare（$sqlInsert）；
$stmt->bindParam（':title'，$title）；
$stmt->bindParam（':start'，$start）；
$stmt->bindParam（':end'，$end）；
如果（$stmt->execute（））{
$conn->commit（）；
返回true；
}否则{
$conn->rollback（）；
返回false；
}

下面是我提到的代码PIN的链接：

---

我只是不确定如何让javascript链接到insert函数。因此，当事件被删除时，它应该保存在数据库中

您需要在fullCalendar中处理

eventReceive

回调。这将为您提供已删除项的关联事件数据。然后可以使用AJAX将数据发送到

add_event.php

。有关回调的更多详细信息，请参阅

像这样的方法应该会奏效：

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));
}

注意：我使用了现代函数来执行AJAX调用，而不是旧的XmlHttpRequest，或者任何依赖于jQuery或其他外部库的函数

下面是上述代码使用的encodeForm函数的代码（这一想法归功于）：

演示：

document.addEventListener（'DOMContentLoaded'，function（）{
var Calendar=FullCalendar.Calendar；
var Draggable=FullCalendarInteraction.Draggable；
var containerell=document.getElementById（'external-events'）；
var calendarEl=document.getElementById（'calendar'）；
var checkbox=document.getElementById（'drop-remove'）；
新拖船（集装箱船{
itemSelector:“.fc事件”，
eventData:函数（eventEl）{
返回{
标题：eventEl.innerText
};
}
});
var calendar=新日历（calendarEl{
插件：['interaction'、'dayGrid'、'timeGrid']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
是的，
真的，
eventReceive:函数（信息）{
//获取要发送到简单对象中的数据位
var eventData={
标题：info.event.title，
开始：info.event.start，
结束：info.event.end
};
console.log（eventData）；
//通过AJAX POST请求发送数据，并记录来自服务器的任何响应
fetch（'add_event.php'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”
},
正文：encodeFormData（eventData）
})
.then（response=>console.log（response））
.catch（错误=>console.log（错误））；
}
});
calendar.render（）；
});
const encodeFormData=（数据）=>{
var form_data=new FormData（）；
for（var输入数据）{
表单_data.append（key，data[key]）；
}
返回表单数据；
}

可拖动事件

我的活动1
我的活动2
我的活动3
我的活动4
我的活动5

落下后取出

您需要在fullCalendar中处理

eventReceive

回调。这将为您提供已删除项的关联事件数据。然后可以使用AJAX将该数据发送到add_event.php。请参阅P.S.警告：您的代码易受SQL注入攻击。您应该使用参数化查询来帮助防止攻击者通过使用恶意输入值危害您的数据库。给出了风险的解释，以及如何使用PHP安全地编写查询的一些示例。切勿将未初始化的数据直接插入SQL。按照现在编写代码的方式，有人很容易窃取、错误地更改甚至删除您的数据。（您使用了一个预先准备好的语句，但是没有使用参数，它没有提供任何保护！）嘿，您能确切地解释一下我如何处理事件接收吗？我得到了ajax部分，但在此之前，eventreceive需要正确处理？感谢sql部分。那么我应该做bindparam吗？是的，你绝对必须做bindparam嘿！我修复了SQL并测试了上述代码。错误为title、start和end.Ok的索引未定义。这有点令人惊讶。您是否使用浏览器的网络工具来调试在获取请求中实际发送的内容？您是否尝试记录$\u POST的内容，以查看它在发送到服务器时实际包含的内容？我们需要多一点

const encodeFormData = (data) => {
  var form_data = new FormData();

  for ( var key in data ) {
    form_data.append(key, data[key]);
  }
  return form_data;   
}