Python Flask 使用按钮调用函数

Posted 2023-02-22

【中文标题】Python Flask 使用按钮调用函数

【英文标题】：Python Flask calling functions using buttons

【发布时间】：2015-09-03 03:42:56

【问题描述】：

一旦我的烧瓶模板中的按钮被按下，我希望它调用 app.py 中定义的 python 函数，通过在下面定义函数的地方键入以下内容，我可以在模板中调用该函数：

app.py 中的示例函数：

@app.route('/foo')
def foo(x,y):
    pass
app.jinja_env.globals.update(foo=foo)

模板：

<button  type="button" onclick="myFunction(this)" name="enable" id="counter"> Enable </button>

在我的按钮中，我有 onclick 属性，只是为了测试使用 javascript 按下了正确的按钮：

% block scripts %
     super() 
    <script>
    function myFunction(elem)
        if(confirm('Are you sure you want to ' + elem.name) == true)
            alert("its done.");            
         
         else  
            return false;
                   
    
    </script>
% endblock %

我面临的问题是我需要在模板中提供的功能与正确的按钮相对应。例如，如果按钮显示启用，那么我需要调用已经定义的启用功能，否则如果按钮对应于 false，我希望使用禁用功能。

我觉得我正朝着正确的方向前进，但无法超越这一部分。请尽可能详细。

【参考方案1】：

如果你想在不向服务器产生请求的情况下执行你的函数，那么你的函数必须在 JavaScript 中定义。否则，您需要触发 HTTP 请求。

现在，在您的情况下，如果您想要做的只是启用/禁用按钮，那么在 javascript 中执行所有这些操作是有意义的（无需访问服务器）。

例子：

<button type="button" onclick="disableButton(this)" name="enable">Enable</button>

javascript

function disableButtonState(elem) 
    if(confirm('Are you sure you want to disable this button?') == true) 
        elem.disabled = true;
        alert("its done.");            
    
    else  
        return false;
              

</script>

但是，如果您想要调用服务器上的方法，例如发送电子邮件，那么您应该使用form POST/GET 或AJAX POST/GET

例子：

app.py

@app.route('/foo', methods=['GET', 'POST'])
def foo(x=None, y=None):
    # do something to send email
    pass

模板

<form action="/foo" method="post">
    <button type="submit" value="Send Email" />
</form>

当您单击“发送电子邮件”按钮时，一个 HTTP POST 请求将发送到您应用程序上的“/foo”。您的函数foo 现在可以从请求中提取一些数据，并在服务器端执行它想做的任何事情，然后向客户端 Web 浏览器返回响应。

当涉及到使用 Flask 构建的 Web 应用程序时，建议通过 Flask Tutorial 更好地了解客户端/服务器交互。

【讨论】：

感谢您的回复。所以从你告诉我的情况来看，我只需要针对我的具体情况使用 JavaScript。我面临的最大问题是试图在 JS 中调用实际的 python 函数。你能指出我正确的方向或举个例子吗？

您不能直接从 JavaScript 调用 python 函数，因为在这种情况下，您的 JavaScript 正在客户端的浏览器上运行，而您的 Python 函数存在于服务器上。实现这种通信的唯一方法是将 HTTP 请求发送到您的服务器。这就是我的回答所暗示的。如果您尝试做的是纯粹的视觉操作，例如禁用或隐藏按钮，那么这可以完全在 JavaScript 中实现。这是你的意图吗？

查看我的编辑以使用 javascript 操作按钮，如果这是你想要做的事情

啊，我明白了。我不想只是更改服务器页面上的文本，而后端没有实际发生任何事情。我已经完全完成了我需要在服务器端禁用的功能。所以我确实需要一个 HTTP 请求来执行此操作。我明天会搜索一下。感谢您的指导。