如何通过ajax发布到flask并更新SQLAlchemy数据库来删除事件FullCalendar？

Question

我完全不知所措。

我正在制作一个癫痫发作跟踪应用程序，并且我正在尝试允许通过弹出窗口删除 Fullcalendar 中的事件。 单击弹出窗口时，应将事件的 id 发布到 @app.route('/delete') 并且应更新 SQLAlchemy 数据库，删除该事件，并应再次呈现日历减去该事件。

这是我对删除脚本的可怕尝试。

<script>
        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 (event) {
                    if(confirm("Are you sure you want to delete it?")){
                        var event_id = event.id
                        $.ajax({
                            url:"{{ url_for('delete') }}",
                            type: "POST",
                            data: {id: event_id},
                            success:function()
                            {
                                alert("Event Removed")
                            }
                        })
                    }
                }
            });

            calendar.render();
        });
    </script>

和@app.route('/delete')

@app.route("/delete", methods=['GET', 'POST'])
def delete(id):
    event_id = request.data.id
    event_to_delete = Seizures.query.get(event_id)
    db.session.delete(event_to_delete)
    db.session.commit()
    return redirect(url_for('show_calendar'))

我确信这是可能的，但我还不精通 JS。

Answer 1

结果证明问题不是出在 Javascript 上，而是出在烧瓶 @app.route 上。 在我使用 request.data.id 尝试获取数据之前，我应该使用 request.form['id']。 现在正在从 FullCalendar 中删除该事件，并且正在从数据库中删除该事件。

解决方案：

@app.route("/delete", methods=['GET', 'POST'])
def delete():
    event_id = None
    if request.method == 'POST':
        event_id = request.form['id']
        event_to_delete = Seizures.query.get(event_id)
        db.session.delete(event_to_delete)
        db.session.commit()
        return redirect(url_for('show_calendar'))