Flask点击提交按钮事件处理|极客笔记

Flask点击提交按钮事件处理

在Web开发中，经常会遇到需要在用户点击按钮时触发相应操作的需求。在Flask框架中，我们可以通过JavaScript的onclick事件来实现按钮点击事件的处理。本文将详细讲解如何在Flask应用中处理按钮点击事件。

准备工作

在开始之前，确保你已经安装了Flask和相关的依赖包。如果还没有安装，可以通过以下命令进行安装：

pip install Flask

接下来，我们创建一个简单的Flask应用，演示如何处理按钮点击事件。我们将创建一个包含一个按钮的HTML页面，并在用户点击按钮时触发Flask应用中的相应操作。

创建Flask应用

首先，我们创建一个名为app.py的Flask应用，代码如下：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    # 处理按钮点击事件的逻辑
    # 在这里编写需要执行的代码

    return '按钮点击事件已处理'

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们定义了两个路由。/路由用于渲染包含按钮的HTML页面，/submit路由用于处理按钮点击事件。在submit路由中，我们可以编写处理按钮点击事件的具体逻辑。

创建HTML页面

接下来，我们创建一个名为index.html的HTML页面，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Submit OnClick</title>
</head>
<body>
    <h1>点击按钮触发事件</h1>

    <button onclick="submitForm()">提交</button>

    <script>
        function submitForm() {
            fetch('/submit', {
                method: 'POST',
                body: JSON.stringify({}),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.text())
            .then(data => {
                alert(data);
            });
        }
    </script>
</body>
</html>

在上面的HTML代码中，我们创建了一个按钮，并为按钮添加了onclick事件。当用户点击按钮时，JavaScript代码中的submitForm函数将向/submit路由发送POST请求，并在响应返回后显示一个弹框提示。