如何通过在 JavaScript 和 PHP 中拖放外部事件来更新数据库中的事件？

Question

我正在使用全日历 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;
    }

这是我提到的密码的链接：https://fullcalendar.io/docs/external-dragging-demo 我只是不确定如何让 javascript 链接到插入函数。因此，当事件被删除时，它应该保存在数据库中。

Answer 1

您需要在 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>

---

附：您还应该紧急修复PHP代码中的SQL注入漏洞，正如我在上面的cmets中提到的。