附录

Question

我正在构建一个小应用程序，并希望使用Flask处理按钮单击。我需要添加什么来使其工作＆gt;

如果模板中包含以下内容：

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <div class="container">
        <h2>Button Pressed: {{ButtonPressed}} </h2>
       <input type="submit" value="Click Me" >
     </div>

</body>

以下.py

Button Pressed = 0        
@app.route('/button', methods=["GET", "POST"])
    def button():
        if request.method == "GET":
            return render_template("button.html", ButtonPressed = ButtonPressed)
        return redirect(url_for('button'))

我搜索了很多，但所有这些都是一种形式。但这不应该是一种形式吗？

提前致谢！

Answer 1

它必须是一种形式，或者您必须使用Javascript。

有两种方法可以用来处理按钮点击。一种方法是使用表单，另一种方法是使用jQuery（尽管vanilla JS就足够了）。

如果您决定使用表单，很明显，您的按钮应该在表单中。最终结果将类似于下面的结果。

<div class="container">
    ...
    <form action="/button" method="get"> <!-- or method="post" -->
        <input type="submit" value="Click Me" >
    </form>
    ...
</div>

如果您决定使用jQuery，则必须按下按钮。如果按下按钮，您需要向GET发送/button请求。您的按钮应该是id，以便我们可以轻松识别我们正在处理的按钮。

您的jQuery代码看起来与下面的类似。

$("input").click(function() { // or $("input#<input id, if it has one>")...
    $.get('/button');
    // If you want to post to the backend instead, do
    // $.post('/button');
});

对于这两种情况，您的.py文件通常会保持不变。

旁注

每次发送请求ButtonPressed时（即按下按钮时），您可能希望在请求中的.py文件中增加/button。你的Python文件看起来像这样：

ButtonPressed = 0        
@app.route('/button', methods=["GET", "POST"])
def button():
    if request.method == "POST":
        ButtonPressed += 1  # Note this increment here.
        return render_template("button.html", ButtonPressed = ButtonPressed)
    return redirect(url_for('button'))

如果您不增加ButtonPressed，则会始终显示0，而不是按下按钮的次数。

附录

如果您要从表单发送POST个请求（即使用method="post"而不是method="get"）或jQuery代码（即使用$.post(...)而不是{{1} }），应修改您的代码以接受$.get(...)个请求，而不是POST个请求。换句话说，您的GET文件应包含类似下面的内容。

.py

如果您考虑接受ButtonPressed = 0 @app.route('/button', methods=["GET", "POST"]) def button(): if request.method == "POST": return render_template("button.html", ButtonPressed = ButtonPressed) return redirect(url_for('button'))的{{1}}和GET请求，只需在条件语句中添加POST条件即可。您的条件语句将为/button。

Answer 2

它应该在一个表格内提交。

方法-1：

`<div class="container">
    <h2>Button Pressed: {{ButtonPressed}}</h2>
    <form method="post">
        <input type="submit" value="Click Me" >
    </form>
 </div>`

Python -

ButtonPressed = 0        
@app.route('/button', methods=["GET", "POST"])
def button():
    if request.method == "POST":
        return render_template("button.html", ButtonPressed = ButtonPressed)
        # I think you want to increment, that case ButtonPressed will be plus 1.
    return render_template("button.html", ButtonPressed = ButtonPressed)

方法2 -

使用Ajax提交表单。请阅读http://api.jquery.com/jquery.ajax/

中的文档

提交帖子请求，您的Flask应用程序会将ButtonPressed递增值发送到该函数，您可以根据需要处理值。不过，您需要一个表单，您需要使用JavaScript更新ButtonPressed值。但是，如果需要存储ButtonPressed值，则应在某些数据库中维护它。

方法3 -

如果没有表单，您可以使用Bootstrap使链接看起来像按钮，并直接在UI上更新它，以防您不需要将ButtonPressed值存储在某处，这样也可以避免对服务器进行不必要的调用（您不需要我想存储它）。 Bootstrap - http://getbootstrap.com/

如何处理按钮点击python / Flask

2 个答案:

旁注

附录