Flask/Jinja按钮onClick调用后端函数失效，求排查代码问题

你的代码示例 #

后端代码（main.py） #

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

前端代码（index.html） #

<button class="btn btn-danger btn-sm" onclick={{rem_book}}>X</button>

核心错误原因 #

你混淆了服务器端Python代码和浏览器端JavaScript代码的运行环境：

• remove_book是定义在Flask后端的Python函数，只能在服务器上执行，无法直接被浏览器的onclick事件调用。
• 模板渲染后，{{rem_book}}会被替换成这个Python函数的字符串表示（比如<function home.<locals>.remove_book at 0x7fxxxx>），这完全不是有效的JavaScript代码，所以点击按钮不会触发任何服务器端的执行逻辑。

正确实现方式 #

方法1：通过AJAX异步请求后端接口 #

1. 后端新增处理删除请求的路由：

@app.route('/remove-book/<int:book_id>', methods=['POST'])
def remove_book(book_id):
    # 这里可添加实际删除逻辑，比如根据book_id操作数据库
    print('im here')
    return jsonify({'status': 'success'})

2. 前端修改按钮，调用JavaScript函数发送请求：

<button class="btn btn-danger btn-sm" onclick="removeBook({{ book.id }})">X</button>

<script>
function removeBook(bookId) {
    fetch(`/remove-book/${bookId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 若启用CSRF保护，需添加令牌，比如Flask-WTF的写法：
            // 'X-CSRFToken': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        // 请求成功后的操作，比如刷新页面或移除对应DOM元素
        console.log(data);
    })
    .catch(error => console.error('Error:', error));
}
</script>

方法2：通过表单同步提交 #

1. 后端路由（执行逻辑后重定向回首页）：

@app.route('/remove-book/<int:book_id>', methods=['POST'])
def remove_book(book_id):
    print('im here')
    # 执行删除逻辑后重定向回首页
    return redirect('/')

2. 前端给按钮包裹表单：

<form action="/remove-book/{{ book.id }}" method="POST" style="display: inline;">
    <!-- 若启用CSRF保护，需添加隐藏字段： -->
    <!-- {{ form.hidden_tag() }} -->
    <button type="submit" class="btn btn-danger btn-sm">X</button>
</form>

内容的提问来源于stack exchange，提问作者Gustavo Gomes