如何通过AJAX向Flask发请求删除FullCalendar事件并更新SQLAlchemy数据库

前端代码修改说明 #

原有代码存在两处核心问题：

• FullCalendar v5+版本eventClick回调返回的参数为复合对象，需要从event.event下获取事件实例，才能正确读取ID
• AJAX请求成功后没有同步更新本地日历视图，导致删除后页面不刷新就还能看到已删除事件

修正后的完整代码：

document.addEventListener("DOMContentLoaded", function () {
    let calendarEl = document.getElementById('calendar');

    let calendar = new FullCalendar.Calendar(calendarEl, {
        aspectRatio: 2.25,
        selectable: true,
        selectHelper: true,
        editable: true,
        expandRows: true,
        timeZone: 'Europe/London',
        defaultView: 'listMonth',
        themeSystem: 'bootstrap',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        weekNumbers: true,
        dayMaxEvents: true,
        events: [
            {% for event in events %}
                {
                    id: '{{ event.id }}',
                    title: '{{event.seizure_type}} {{event.note}}',
                    start: '{{event.date}}',
                    textColor: '#000',
                    {% if event.seizure_type == 'Strong' %}
                        backgroundColor: 'red',
                    {% elif event.seizure_type == 'Medium' %}
                        backgroundColor: 'orange',
                    {% else %}
                        backgroundColor: 'yellow',
                    {% endif %}
                },
            {% endfor %}
        ],
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        eventClick: function (info) {
            if(confirm("Are you sure you want to delete it?")){
                // 正确获取事件ID
                const event_id = info.event.id
                $.ajax({
                    url:"{{ url_for('delete') }}",
                    type: "POST",
                    data: {id: event_id},
                    success:function()
                    {
                        alert("Event Removed")
                        // 方式1：无刷新直接移除日历中的对应事件
                        info.event.remove()
                        // 方式2：也可以选择刷新整页同步数据：window.location.reload()
                    }
                })
            }
        }
    });

    calendar.render();
});

注意：需要确保页面已经提前引入jQuery库，否则$调用会报错

后端Flask接口修改说明 #

原有代码存在三处核心问题：

• 路由函数不需要定义id参数，ID是通过POST表单传递，不是路由路径参数
• 读取POST参数的方式错误，request.data是原始请求字节，需要从request.form读取表单参数
• AJAX请求不会执行服务端返回的重定向指令，需要返回JSON状态告知前端处理结果

修正后的完整代码：

from flask import jsonify, request

@app.route("/delete", methods=['POST'])
def delete():
    # 正确读取POST表单中的ID参数
    event_id = request.form.get('id')
    event_to_delete = Seizures.query.get(event_id)
    if event_to_delete:
        db.session.delete(event_to_delete)
        db.session.commit()
        # 返回成功状态
        return jsonify({"status": "success", "msg": "删除成功"}), 200
    # 未找到对应事件返回错误
    return jsonify({"status": "fail", "msg": "事件不存在"}), 404

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