如何将FullCalendar事件发送至控制器以存入数据库？

前端实现（基于你提供的代码优化） #

FullCalendar的eventClick回调是触发事件操作的入口，你可以在这里收集事件数据并发送到后端，以下是完善后的代码：

eventClick: function(presta) {
    // 整理事件核心数据，注意处理日期格式
    let donnees = {
        "title": presta.event.title,
        "start": presta.event.start.toISOString(), // 转为ISO格式，后端易解析
        "end": presta.event.end ? presta.event.end.toISOString() : null // 兼容结束日期为空的情况
    }

    // 创建AJAX请求
    let xhr = new XMLHttpRequest();
    xhr.open("POST", `/api/${presta.event.id}/edit`, true);
    // 必须设置请求头，告知后端接收JSON格式数据
    xhr.setRequestHeader("Content-Type", "application/json");
    
    // 监听请求状态，处理响应结果
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log("事件保存成功");
            // 这里可以添加刷新日历、提示用户等操作
        } else {
            console.error("事件保存失败");
            // 处理错误，比如弹窗提示用户
        }
    };
    
    xhr.send(JSON.stringify(donnees));
}

后端控制器处理 #

后端需要接收前端发送的JSON数据，解析后写入数据库。以下是PHP示例（原生PDO写法，框架写法逻辑类似）：

<?php
header("Content-Type: application/json");
// 读取前端发送的JSON数据
$input = json_decode(file_get_contents('php://input'), true);

// 基础参数验证
if (!isset($input['title'], $input['start'])) {
    http_response_code(400);
    echo json_encode(["error" => "缺少标题或开始日期参数"]);
    exit;
}

// 连接数据库并执行更新操作
try {
    $pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');
    $stmt = $pdo->prepare("UPDATE events SET title = ?, start = ?, end = ? WHERE id = ?");
    $stmt->execute([
        $input['title'],
        $input['start'],
        $input['end'],
        $_GET['id'] // 从URL路径获取事件ID，对应前端的/api/{id}/edit
    ]);
    
    echo json_encode(["success" => true]);
} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(["error" => "数据库操作失败：" . $e->getMessage()]);
}
?>

关键注意事项 #

• 日期格式处理：FullCalendar的start/end是Date对象，必须转为字符串（如ISO 8601格式）才能正确传输，后端解析后再存入数据库的日期类型字段。
• 请求头设置：前端必须添加Content-Type: application/json请求头，否则后端无法正确解析JSON数据。
• 数据双向验证：前后端都要做参数校验，比如检查标题非空、日期格式合法，避免无效数据进入数据库。
• 请求方式规范：更新事件建议用PUT请求，新增事件用POST，更符合RESTful设计规范。
• 错误反馈：前端根据响应状态码处理成功/失败场景，给用户明确的操作反馈，比如弹窗提示。

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