如何实现点击删除按钮时调用函数删除学生并保持/刷新当前页面？

下面提供两种常见方案，分别对应页面刷新和无刷新更新的需求：

方案1：页面刷新式删除（传统表单提交） #

这种方式通过表单提交请求，后端处理删除后重定向回原页面，自动完成刷新。

模板修改： #

给每个删除按钮包裹对应学生的表单，传递学生ID：

<div class="content">
    {% for student in students %}
    <p class='my-2 text-center'>
        {{student.name}} | {{student.bio}}
        <!-- 内嵌表单，提交删除请求 -->
        <form method="POST" action="/delete-student/{{student.id}}" style="display: inline;">
            <!-- 框架自带的CSRF防护令牌（比如Flask/Django需要） -->
            {% if csrf_token %}
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {% endif %}
            <button type="submit" class="btn btn-danger">Delete</button>
        </form>
    </p> 
    {% endfor %}
</div>

后端处理（以Flask为例）： #

编写删除路由，完成数据库操作后重定向回原页面：

@app.route('/delete-student/<int:student_id>', methods=['POST'])
def delete_student(student_id):
    # 执行数据库删除逻辑
    target_student = Student.query.get(student_id)
    if target_student:
        db.session.delete(target_student)
        db.session.commit()
    # 重定向回之前的页面，实现刷新
    return redirect(request.referrer or '/student-list')

方案2：无刷新删除（AJAX方式） #

这种方式通过前端异步请求完成删除，直接操作DOM移除对应项，页面无需刷新。

模板修改： #

给按钮和学生项添加标识ID，绑定点击事件：

<div class="content">
    {% for student in students %}
    <p class='my-2 text-center student-item' data-id="{{student.id}}">
        {{student.name}} | {{student.bio}}
        <button type="button" class="btn btn-danger delete-btn" data-id="{{student.id}}">Delete</button>
    </p> 
    {% endfor %}
</div>

<script>
// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const studentId = btn.dataset.id;
        // 发送异步删除请求
        const response = await fetch(`/delete-student/${studentId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 带上CSRF令牌（根据你的框架调整）
                'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
            }
        });
        
        if (response.ok) {
            // 删除成功后，移除页面上对应的学生项
            document.querySelector(`.student-item[data-id="${studentId}"]`).remove();
        } else {
            alert('删除失败，请重试');
        }
    });
});
</script>

后端处理（以Flask为例）： #

返回JSON格式的处理结果，无需重定向：

@app.route('/delete-student/<int:student_id>', methods=['POST'])
def delete_student(student_id):
    try:
        target_student = Student.query.get(student_id)
        if target_student:
            db.session.delete(target_student)
            db.session.commit()
        return jsonify({'success': True}), 200
    except Exception as e:
        db.session.rollback()
        return jsonify({'success': False}), 500

关键注意事项： #

• 必须使用POST请求处理删除，避免GET请求导致的误操作和安全风险
• 务必开启框架的CSRF防护，防止跨站请求伪造攻击
• 后端删除逻辑要处理事务回滚，避免数据库异常

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