如何利用JavaScript onclick事件将预约课程信息及用户unique id存入数据库？

针对你提到的已登录用户通过日历预约课程，确认后将数据存入class表的需求，我来帮你补全前端交互和后端存储的代码逻辑：

一、完善前端FullCalendar的点击交互逻辑 #

首先在你的classes.php的fullCalendar初始化代码中，添加eventClick回调函数来处理课程点击事件，结合确认提示框和AJAX请求：

<script>
$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        // 保留你已有的配置，比如header等
        header:{
            left:'prev,next today',
            center:'title',
            right:'month,agendaWeek,agendaDay'
        },
        // 开启事件点击回调
        eventClick: function(calEvent, jsEvent, view) {
            // 弹出确认预约的提示框
            if(confirm(`确认预约课程：${calEvent.title} 吗？`)){
                // 从PHP session获取已登录用户的unique_id（更安全，避免前端篡改）
                var userUniqueId = '<?php echo $_SESSION["user_unique_id"]; ?>';

                // 发送AJAX请求到后端处理存储
                $.ajax({
                    url: 'save_class_booking.php', // 后端处理文件
                    type: 'POST',
                    data: {
                        class_id: calEvent.id, // 假设课程有唯一标识ID
                        class_title: calEvent.title,
                        class_start: calEvent.start.format('YYYY-MM-DD HH:mm:ss'),
                        class_end: calEvent.end ? calEvent.end.format('YYYY-MM-DD HH:mm:ss') : ''
                    },
                    success: function(response){
                        const res = JSON.parse(response);
                        if(res.status === 'success'){
                            alert('预约成功！');
                            // 刷新日历，更新事件状态
                            $('#calendar').fullCalendar('refetchEvents');
                        } else {
                            alert(`预约失败：${res.message}`);
                        }
                    },
                    error: function(){
                        alert('网络错误，请检查连接后重试');
                    }
                });
            }
        },
        // 其他已有的配置...
        editable: false, // 根据你的需求设置是否允许编辑事件
        events: 'fetch_classes.php' // 假设你从这个接口加载课程数据
    });
});
</script>

二、创建后端存储处理文件save_class_booking.php #

这个文件负责接收前端传过来的数据，验证用户身份后插入到class数据库表中：

<?php
// 开启session，确保能获取登录用户信息
session_start();

// 数据库连接配置（根据你的实际情况修改）
$servername = "localhost";
$db_user = "your_db_username";
$db_pwd = "your_db_password";
$db_name = "your_db_name";

// 创建数据库连接
$conn = new mysqli($servername, $db_user, $db_pwd, $db_name);

// 检查连接是否成功
if ($conn->connect_error) {
    echo json_encode(['status' => 'error', 'message' => '数据库连接失败']);
    exit;
}

// 验证用户是否已登录
if(!isset($_SESSION["user_unique_id"])){
    echo json_encode(['status' => 'error', 'message' => '用户未登录，请先登录']);
    exit;
}

// 获取前端传递的课程数据
$user_id = $_SESSION["user_unique_id"];
$class_id = $_POST['class_id'];
$class_title = $_POST['class_title'];
$class_start = $_POST['class_start'];
$class_end = $_POST['class_end'];

// 检查用户是否已预约该课程（可选，避免重复预约）
$check_stmt = $conn->prepare("SELECT id FROM `class` WHERE user_unique_id = ? AND class_id = ?");
$check_stmt->bind_param("ss", $user_id, $class_id);
$check_stmt->execute();
$check_stmt->store_result();
if($check_stmt->num_rows > 0){
    echo json_encode(['status' => 'error', 'message' => '你已经预约过该课程了']);
    $check_stmt->close();
    $conn->close();
    exit;
}
$check_stmt->close();

// 准备插入SQL语句（使用预处理语句防止SQL注入）
$stmt = $conn->prepare("INSERT INTO `class` (user_unique_id, class_id, class_title, class_start, class_end) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $user_id, $class_id, $class_title, $class_start, $class_end);

// 执行插入操作
if($stmt->execute()){
    echo json_encode(['status' => 'success', 'message' => '预约成功']);
} else {
    echo json_encode(['status' => 'error', 'message' => '数据库插入失败：'.$stmt->error]);
}

// 关闭连接和语句
$stmt->close();
$conn->close();
?>

三、关键注意事项 #

• 安全防护：使用预处理语句避免SQL注入，通过session获取用户ID而非前端传递，防止数据篡改
• 重复预约校验：添加了用户是否已预约该课程的检查，可根据需求调整
• 日历刷新：预约成功后调用refetchEvents刷新日历，确保显示最新状态
• 表结构适配：确保你的class表包含user_unique_id、class_id、class_title、class_start、class_end等字段，可根据实际业务调整字段数量和类型

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