如何处理按钮点击python/Flas

2024-05-12 16:59:09 发布

您现在位置：Python中文网/ 问答频道 /正文
309 3

我正在构建一个小应用程序，并想处理一个按钮点击使用烧瓶。我需要添加什么才能让它工作>

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

<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'))

我找了很多，但都是一种形式。但这不应该是一种形式，对吧？

提前谢谢！


Tags： divgetreturnhtmlbodybuttonh2content
2条回答
网友
1楼 · 编辑于 2024-05-12 16:59:09

它必须是一个表单，或者必须使用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。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，而不是按钮被按下的次数。

附录

如果从表单（即使用method="post"而不是method="get"）或jQuery代码（即使用$.post(...)而不是$.get(...)）发送POST请求，则应修改代码以接受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'))

如果您考虑同时接受GET和POST对/button的请求，只需在条件语句中添加or条件。你的条件语句是if request.method == "POST" or request.method == "GET"。

网友
2楼 · 编辑于 2024-05-12 16:59:09

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

方法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/

提交post请求，Flask应用程序将向函数发送ButtonPressed incremented value，您可以根据需要处理value。不过，您需要一个表单来完成此操作，并且需要使用JavaScript更新ButtonPressed值。但是，如果需要存储ButtonPressed值，则应在某些数据库中对其进行维护。

方法3-

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

相关问题 更多 >

    编程相关推荐