使用Flask从MongoDB删除记录时点击删除按钮无响应求助

我尝试从MongoDB中删除记录，但点击删除按钮后没有任何反应，相关代码如下：

HTML代码 #

<!-- Manager Delete Modal -->

{% for manager in managers %}
  <div class="manager">
      <!-- Deleting a manager -->
      <div id="deleteEmployeeModal" class="modal fade">
          <div class="modal-dialog">
              <div class="modal-content">
                  <form method="POST" action="{{ url_for('views.delete_manager', id=manager['_id']) }}">
                      <div class="modal-footer">
                          <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                          <input type="submit" class="btn btn-danger" value="Delete">
                      </div>
                  </form>
              </div>
          </div>
      </div>
  </div>
{% endfor %}

Flask路由代码 #

@views.route('/<string:id>/delete_manager/', methods=['POST'])
def delete_manager(id):
    if request.method == 'POST':
        managers.delete_one({"_id": ObjectId(id)})
        return redirect(url_for('views.adminHome'))

MongoDB连接代码 #

client = MongoClient('localhost', 27017)
db = client.RentCars_db # creating your flask database using your mongo client

排查与解决方法 #

1. 修复重复的Modal ID #

循环生成的所有Modal都使用了同一个id="deleteEmployeeModal"，HTML中ID必须唯一，这会导致只有第一个Modal能正常触发，后续的删除按钮无法关联到正确的Modal。

修改方法：给每个Modal的ID添加唯一标识（比如manager的_id）：

<div id="deleteEmployeeModal-{{ manager['_id'] }}" class="modal fade">

同时确保触发该Modal的按钮的data-target属性对应修改为#deleteEmployeeModal-{{ manager['_id'] }}。

2. 添加CSRF令牌验证 #

Flask默认会对POST请求进行CSRF保护（如果配置了SECRET_KEY），缺失CSRF令牌会导致请求被静默拦截，无任何响应。

在表单内添加CSRF令牌：

<form method="POST" action="{{ url_for('views.delete_manager', id=manager['_id']) }}">
    {{ csrf_token() }} <!-- 需确保Flask已配置SECRET_KEY -->
    <div class="modal-footer">
        <!-- 按钮内容不变 -->
    </div>
</form>

同时在Flask配置中设置：

app.config['SECRET_KEY'] = 'your-custom-secret-key'

3. 确认数据库集合引用正确 #

路由中使用了managers.delete_one，但数据库连接代码中未定义managers集合，需添加集合引用：

client = MongoClient('localhost', 27017)
db = client.RentCars_db
managers = db.managers # 新增这行，指定操作的集合

4. 检查网络请求状态 #

打开浏览器开发者工具（F12），切换到网络标签，点击删除按钮，观察请求状态：

• 无请求发送：说明Modal或按钮绑定有问题，回到第一步检查Modal ID和触发按钮的关联。
• 请求返回404：说明路由URL与url_for生成的URL不匹配，检查路由定义和id参数传递是否正确。
• 请求返回500：查看Flask控制台的错误日志，通常是代码报错（比如ObjectId未导入）。

5. 确保ObjectId已导入 #

路由中使用了ObjectId(id)，如果未导入会抛出NameError，导致请求失败：

from bson.objectid import ObjectId # 需添加该导入语句

@views.route('/<string:id>/delete_manager/', methods=['POST'])
def delete_manager(id):
    # ... 原有代码

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