Flask - 在按钮 OnClick 事件上调用 python 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42601478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flask - Calling python function on button OnClick event
提问by Amaanite
I am new to python and Flask. I have a Flask Web App with a button. When I click on the button I would like to execute a python method not a Javascript method. How can I do this?
我是 python 和 Flask 的新手。我有一个带按钮的 Flask Web 应用程序。当我点击按钮时，我想执行一个 python 方法而不是一个 Javascript 方法。我怎样才能做到这一点？
I have seen examples with python where it redirects me to a new page using a form tag like this
我看过 python 的例子，它使用这样的表单标签将我重定向到一个新页面
<form action="/newPage" method="post">
but I don't want it to redirect me to a new page. I just want it to execute the python method. I am making this for a Raspberry Pi robot car. When I press the forward button, I want it to run the method to Turn wheels forward.
但我不希望它把我重定向到一个新页面。我只是想让它执行 python 方法。 我正在为 Raspberry Pi 机器人汽车做这个。当我按下前进按钮时，我希望它运行向前转动车轮的方法。
Button HTML Code (index.html)
按钮 HTML 代码 ( index.html)
<button name="forwardBtn" onclick="move_forward()">Forward</button>
simple app.py Code - move_forward() method located here
简单的 app.py 代码 - move_forward() 方法位于此处
#### App.py code
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html');
def move_forward():
#Moving forward code
print("Moving Forward...")
I have seen similar questions to mine on Stackoverflow, but they don't seem to answer my question or I am unable to understand the answer. If someone could please provide me a simple way to call a Python method on button click event, it would be greatly appreciated.
我在 Stackoverflow 上看到过类似的问题，但他们似乎没有回答我的问题，或者我无法理解答案。如果有人可以为我提供一种在按钮单击事件上调用 Python 方法的简单方法，我将不胜感激。
Other Questions that I have looked at:
我看过的其他问题：
--Python Flask calling functions using buttons
--Calling a python function with a button
回答by Gihan Gamage
You can simply do this with help of AJAX... Here is a example which calls a python function which prints hello without redirecting or refreshing the page.
你可以在 AJAX 的帮助下简单地做到这一点......这是一个调用 python 函数的示例，该函数在不重定向或刷新页面的情况下打印 hello。
In app.py put below code segment.
在 app.py 中放在代码段下面。
#rendering the HTML page which has the button
@app.route('/json')
def json():
return render_template('json.html')
#background process happening without any refreshing
@app.route('/background_process_test')
def background_process_test():
print ("Hello")
return ("nothing")
And your json.html page should look like below.
您的 json.html 页面应如下所示。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#test').bind('click', function() {
$.getJSON('/background_process_test',
function(data) {
//do nothing
});
return false;
});
});
</script>
//button
<div class='container'>
<h3>Test</h3>
<form>
<a href=# id=test><button class='btn btn-default'>Test</button></a>
</form>
</div>
Here when you press the button Test simple in the console you can see "Hello" is displaying without any refreshing.
在这里，当您按下控制台中的 Test simple 按钮时，您可以看到“Hello”正在显示而没有任何刷新。
回答by Logan Bertram
It sounds like you want to use this web application as a remote control for your robot, and a core issue is that you won't want a page reload every time you perform an action, in which case, the last link you posted answers your problem.
听起来您想将此 Web 应用程序用作机器人的远程控制，一个核心问题是您不希望每次执行操作时都重新加载页面，在这种情况下，您发布的最后一个链接会回答您的问题问题。
I think you may be misunderstanding a few things about Flask. For one, you can't nest multiple functions in a single route. You're not making a set of functions available for a particular route, you're defining the one specific thing the server will do when that route is called.
我想你可能对 Flask 有一些误解。一方面，您不能在单个路由中嵌套多个函数。您不是在为特定路由提供一组函数，而是定义了在调用该路由时服务器将执行的特定操作。
With that in mind, you would be able to solve your problem with a page reload by changing your app.py to look more like this:
考虑到这一点，您将能够通过将 app.py 更改为更像这样来解决页面重新加载的问题：
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
@app.route("/forward/", methods=['POST'])
def move_forward():
#Moving forward code
forward_message = "Moving Forward..."
return render_template('index.html', forward_message=forward_message);
Then in your html, use this:
然后在你的 html 中，使用这个：
<form action="/forward/" method="post">
<button name="forwardBtn" type="submit">Forward</button>
</form>
...To execute your moving forward code. And include this:
...执行您的前进代码。并包括这个：
{{ forward_message }}
... where you want the moving forward message to appear on your template.
...您希望前进消息出现在模板上的位置。
This will cause your page to reload, which is inevitable without using AJAX and Javascript.
这将导致您的页面重新加载，这在不使用 AJAX 和 Javascript 的情况下是不可避免的。
回答by user2371563
index.html (index.html should be in templates folder)
index.html（index.html 应该在模板文件夹中）
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<h2>jQuery-AJAX in FLASK. Execute function on button click</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type=text/javascript> $(function() { $("#mybutton").click(function (event) { $.getJSON('/SomeFunction', { },
function(data) { }); return false; }); }); </script>
</head>
<body>
<input type = "button" id = "mybutton" value = "Click Here" />
</body>
</html>
test.py
测试文件
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/SomeFunction')
def SomeFunction():
print('In SomeFunction')
return "Nothing"
if __name__ == '__main__':
app.run()
