如何使 HTML 按钮在单击时执行 python 代码？答案

【问题标题】：How do I make an HTML button execute python code onclick?如何使 HTML 按钮在单击时执行 python 代码？
【发布时间】：2021-05-20 23:50:47
【问题描述】：

我是网络开发的新手。我已经学会了如何使用烧瓶制作网络服务器。我想要做的是让一个 html 按钮在单击时从 Web 服务器运行 python 代码。这甚至可能吗？如果是这样，有人可以指出一些可以做到这一点的 html 示例吗？

更新：我想我找到了一些可能适用于我所要求的代码。我不确定它是否会起作用。

这里是链接： Call a python function within a html file

如果我要将代码的“单击链接”方面转换为“单击按钮”，它会在查看器端而不是我端运行我的 python 代码吗？

【问题讨论】：

您可以使用标准链接在烧瓶中运行代码并获取新页面。或<form> 也可以在烧瓶中运行代码并获取新页面。或者您需要使用 JavaScript 来运行代码而不加载新页面。你可以使用现代的fetch("/url") 来执行它——但它需要学习 JavaScript。几天前，我正在回答如何使用它将数据发送到烧瓶并获得结果的问题。你可以找到很多关于这个问题的问题。

标签： python html webserver

【解决方案1】：

有两种可能

创建一个 HTML 表单和按钮以提交表单。 from可以调用flask服务器上的post URL
向 HTML 添加一些 javascript 并调用您使用烧瓶服务器创建的任何 HTTP 方法 /url。

【讨论】：

你能详细解释一下吗？抱歉，我对某些术语不熟悉。
假设在您的 Flask 应用程序中，您使用 app.route("/hello") 创建了一个名为“hello”的路由器并向其添加了一个函数。现在在 HTML 中创建一个 HTML 表单，其中包含“/hello”操作和一个提交表单的按钮。例如geeksforgeeks.org/retrieving-html-from-data-using-flask
我现在看到了如何通过单击按钮向我的代码发送消息。但是，一旦单击按钮，我如何在它们的末端运行 python 代码？例如，使用 Python 代码使其 print(“Hello world!”)。我的问题是它会在我这边而不是他们那边运行代码。
不能在浏览器中运行python。您要做的是根据点击生成一个包含您想要显示的内容的 HTML 文件，并将其推送到浏览器。如果你想做的只是在浏览器上显示一些更好的方法是添加一些 javascript

【解决方案2】：

您可以将button 与form 或JavaScript 一起使用

表格

通常要使用button，您需要<form>，它将请求发送到Flask 到action="..." 中定义的url，Flask 发送回响应（文本/HTML），浏览器会自动将其放在窗口中代替以前的 HTML - 所以服务器必须一次又一次地生成完整的 HTML。

from flask import Flask, request, render_template_string
import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''<form action="/page" method="POST">
<button type="submit" name="btn" value="Button 1">Button 1</button>
<button type="submit" name="btn" value="Button 2">Button 2</button>
<button type="submit" name="btn" value="Button 3">Button 3</button>
</form>''')

@app.route('/page', methods=['GET', 'POST'])
def page():
    value = request.form.get('btn') # gives text from `value="Button 1"`
    return f'You pressed {value} at ' + datetime.datetime.now().strftime('%Y.%m.%d %H:%M.%S')

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

同样使用空的action=""，所以它发送请求到相同的url，它需要检查request.method来运行不同的代码

from flask import Flask, request, render_template_string
import datetime

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        value = request.form.get('btn') # gives text from `value="Button 1"`    
        info = f'You pressed {value} at ' + datetime.datetime.now().strftime('%Y.%m.%d %H:%M.%S')
    else:
        info = ""
    
    return render_template_string('''<form action="" method="POST">
<button type="submit" name="btn" value="Button 1">Button 1</button>
<button type="submit" name="btn" value="Button 2">Button 2</button>
<button type="submit" name="btn" value="Button 3">Button 3</button>
</form>{{text}}''', text=info)

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

JavaScript

如果你想在不重新加载所有 HTML 的情况下执行 Flask 代码，那么你需要使用 JavaScript，它可以使用旧的向服务器发送请求 XMLHttpRequest 或现代 fetch()，获得响应并仅替换部分 HTML。通常在这种方法中，服务器会发送 JSON 数据，JavaScript 可能会使用它来替换不同位置的 HTML。

而且这个方法需要学习JavaScript来创建更复杂的东西。

from flask import Flask, request, render_template_string
import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<button onclick="my_function()">Get Time</button>
<span id="time">Press Button to see current time on server.</span>

<script>
span_time = document.querySelector("#time");
function my_function(){
   fetch('/get_time')
   .then(res => res.text())
   .then(text => span_time.innerHTML = text);
}
</script>
''')

@app.route('/get_time')
def time():
    return datetime.datetime.now().strftime('%Y.%m.%d %H:%M.%S')

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

在示例中，我使用render_template_string 而不是render_template 来简化代码 - 现在每个人都可以复制代码并粘贴到一个文件并运行它。

【讨论】：