如何在FullCalendar中克隆事件后通过AJAX更新数据库

嘿，作为编程新手能把FullCalendar的增删改拖都实现已经很棒啦！咱们来搞定克隆事件的保存问题，主要要解决两个关键点：把克隆的新事件数据传给数据库，还有正确处理ID的自增（别自己手动加1哦）。

一、先理清楚当前代码的问题 #

你现在的克隆代码只是把事件渲染到了日历上，但完全没和数据库交互，所以刷新页面后克隆的事件就没了。而且手动给id: event.id+1非常不安全——如果有其他事件刚好占用了这个ID，或者多人操作的时候，很容易出现ID冲突，导致数据混乱。

二、修改克隆逻辑，加入AJAX保存 #

正确的做法是：克隆事件后，把新事件的除了ID之外的所有数据传给后端，让数据库的自增主键来生成新ID，然后后端把新生成的ID返回给前端，再更新日历上的克隆事件（避免后续操作出问题）。

修改后的前端代码

eventClick: function (event, jsEvent, ui, view) {
  // 确保是按住复制键（比如Ctrl）才触发克隆，这里要保证copyKey变量是正确的，比如监听keydown/keyup来判断
  if (!copyKey) return;

  // 克隆事件，不要手动生成ID，留空或者不写，让数据库处理
  var eClone = {
    title: event.title,
    tooling: event.tooling,
    start: event.start,
    end: event.end
  };

  // 先渲染事件到日历（可选，也可以等保存成功后再渲染）
  $('#calendar').fullCalendar('renderEvent', eClone, true); // 第三个参数true表示标记为持久化，但真正持久化还是靠数据库

  // 发送AJAX请求到后端保存新事件
  $.ajax({
    url: "add.php", // 注意这里是新增接口，不是update.php
    type: "POST",
    data: {
      title: eClone.title,
      tooling: eClone.tooling,
      start: $.fullCalendar.formatDate(eClone.start, "Y-MM-DD HH:mm:ss"),
      end: $.fullCalendar.formatDate(eClone.end, "Y-MM-DD HH:mm:ss")
      // 这里不用传ID，数据库自增主键会自动生成
    },
    success: function(response) {
      // 假设后端返回新生成的ID，比如response是{id: 123}
      var newEventId = response.id;
      // 更新日历上的克隆事件ID，方便后续拖拽、删除等操作
      eClone.id = newEventId;
      $('#calendar').fullCalendar('updateEvent', eClone);
      // 重新拉取事件列表，确保前端和数据库数据一致
      $('#calendar').fullCalendar('refetchEvents');
    },
    error: function() {
      alert("克隆事件保存失败，请重试！");
      // 如果保存失败，把刚才渲染的临时事件删掉
      $('#calendar').fullCalendar('removeEvents', eClone._id); // 这里用FullCalendar自动生成的临时_id
    }
  });
},

三、后端add.php的处理示例 #

你的数据库表要把ID设为自增主键（比如MySQL里id INT AUTO_INCREMENT PRIMARY KEY），这样插入数据时不用指定ID，数据库会自动生成唯一的ID。

<?php
// 连接数据库的代码，替换成你自己的数据库连接逻辑
$conn = mysqli_connect("localhost", "username", "password", "your_db");

// 获取前端传过来的数据，注意做安全过滤防止SQL注入
$title = mysqli_real_escape_string($conn, $_POST['title']);
$tooling = mysqli_real_escape_string($conn, $_POST['tooling']);
$start = mysqli_real_escape_string($conn, $_POST['start']);
$end = mysqli_real_escape_string($conn, $_POST['end']);

// 插入数据的SQL语句，不用写ID字段
$sql = "INSERT INTO your_events_table (title, tooling, start, end) VALUES ('$title', '$tooling', '$start', '$end')";

if (mysqli_query($conn, $sql)) {
  // 获取刚插入的自增ID
  $newId = mysqli_insert_id($conn);
  // 返回JSON格式的新ID给前端
  echo json_encode(array('id' => $newId));
} else {
  // 保存失败，返回错误信息
  http_response_code(500);
  echo json_encode(array('error' => mysqli_error($conn)));
}

mysqli_close($conn);
?>

四、额外注意点 #

• copyKey的判断：要确保copyKey变量逻辑正确，比如监听键盘keydown和keyup事件，按住Ctrl键时copyKey设为true，松开设为false，这样用户点击事件时只有按住Ctrl才会触发克隆。
• 数据安全：后端一定要做参数过滤，上面示例用了mysqli_real_escape_string，更安全的方式是使用预处理语句，避免SQL注入风险。
• 事件持久化：renderEvent的第三个参数设为true只是让事件在浏览器本地临时保留，真正的持久化必须依赖数据库，所以AJAX请求是必不可少的。

这样修改后，克隆事件就会正确保存到数据库，ID也由数据库保证唯一自增啦！

内容的提问来源于stack exchange，提问作者Eren Mirza