如何在 Flask 模板中通过按钮点击调用后端函数

Jinja 模板无法直接执行 Python 函数，onclick 是前端 Ja vaScript 事件

很多刚开始接触 Flask 的朋友，都容易踩进一个“想当然”的坑：试图在 HTML 按钮的 onclick 属性里，直接调用后端的 Python 函数。结果呢？页面要么毫无反应，要么直接报错。

问题的根源在于一个根本性的架构隔离：Python 函数运行在遥远的服务器上，而 HTML 的 onclick 属性里的代码，则是在用户自己的浏览器里（Ja vaScript 环境）执行的。这两者一个在“云端”，一个在“本地”，中间隔着整个互联网，怎么可能直接喊一嗓子就调用呢？所以，当你把 remove_book() 这样的函数名塞给 onclick 时，Jinja 模板引擎最多只能把它渲染成一个表示函数地址的字符串，浏览器拿到这个字符串完全不知所措，删除操作自然无法触发。

✅ 正确做法：使用表单提交（推荐初学者）

最经典、也最可靠的方式，就是回归 Web 的基础交互模式：表单提交。我们来把删除按钮包装成一个 POST 请求的表单。

首先，修改你的 index.html 模板：

{% for book in books %}
  

    {{ book.title }}
    

      
      X
    
  
{% endfor %}

看到了吗？关键点在于：我们为每个书籍项都创建了一个独立的表单。表单的提交目标（action）指向一个专门的路由 /remove-book，方法定为 POST。要删除哪本书？我们把它的 id 藏在了一个隐藏域（hidden input）里。

接下来，在 main.py 中，我们需要为这个表单创建一个专属的“接待处”：

# main.py
from flask import Flask, render_template, request, redirect, url_for

@app.route('/')
def home():
    return render_template('index.html', books=Books.query.all())

@app.route('/remove-book', methods=['POST'])
def remove_book():
    book_id = request.form.get('book_id')
    if book_id:
        book = Books.query.get(book_id)
        if book:
            db.session.delete(book)
            db.session.commit()
            print(f'Book {book_id} removed successfully.')
    return redirect(url_for('home'))  # 刷新主页，体现变更

这里有个细节值得注意：为什么最后要用 redirect(url_for('home'))？这不仅仅是跳转回首页那么简单。它遵循了经典的“POST/Redirect/GET”（PRG）模式，能有效防止用户刷新页面时重复提交删除请求，保证了应用状态的一致性。可别图省事直接返回个 “OK” 字符串，那样体验就差了。

⚠️ 常见误区澄清

在理清正确路径的同时，我们也得把几个典型的错误想法彻底排除：

• ❌ onclick="{{ rem_book }}"：这是最典型的误解。Jinja 渲染出来的会是类似 onclick="" 的字符串，浏览器根本不会执行，只会报错或静默失败。
• ❌ 在主路由函数里定义嵌套函数：比如在 home() 函数内部再写一个 def remove_book(): ...。这个函数的作用域仅限于 home() 执行的那一瞬间，模板无法调用它，Flask 也没有把它注册为一个可访问的路由。
• ❌ 用 GET 请求执行删除：比如用 链接。这严重违反了 HTTP 方法的语义（删除操作应该用 POST 或 DELETE），而且极其危险——网络爬虫、浏览器预读取，甚至用户不小心刷新页面，都可能误触发删除操作。

X

# main.py 新增 API 路由
@app.route('/api/remove-book', methods=['POST'])
def api_remove_book():
    data = request.get_json()
    book_id = data.get('book_id')
    book = Books.query.get(book_id)
    if book:
        db.session.delete(book)
        db.session.commit()
        return {'success': True}
    return {'success': False, 'error': 'Not found'}, 404

说到底，无论选择哪种方式，都必须牢记一个核心原则：Flask 的路由，是连接前端交互与后端逻辑的唯一合法桥梁。所有需要服务器执行的操作，都必须通过 HTTP 请求（GET, POST, PUT, DELETE 等）来“敲门”，并在对应的路由函数中得到处理和响应。理解了这一点，Web 开发的很多困惑就迎刃而解了。