Ama*_*ite 27 html javascript python flask raspberry-pi
我是python和Flask的新手.我有一个带按钮的Flask Web App.当我点击按钮时,我想执行python方法而不是Javascript方法.我怎样才能做到这一点？
我见过python的例子,它使用像这样的表单标签将我重定向到一个新页面
<form action="/newPage" method="post">
但我不希望它将我重定向到新页面.我只是想让它执行python方法. 我正在为Raspberry Pi机器人车做这个.当我按下前进按钮时,我希望它运行方法来向前转动车轮.
按钮HTML代码(index.html)
<button name="forwardBtn" onclick="move_forward()">Forward</button>
简单的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...")
我在Stackoverflow上看到了类似的问题,但它们似乎没有回答我的问题,或者我无法理解答案.如果有人可以请给我一个简单的方法来在按钮点击事件上调用Python方法,我们将不胜感激.
我看过的其他问题:
Gih*_*age 19
您可以在AJAX的帮助下完成此操作...这是一个调用python函数的示例,该函数在不重定向或刷新页面的情况下打印hello.
在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"
您的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>
在按下控制台中的"简单测试"按钮时,您可以看到"Hello"正在显示而没有任何刷新.
Vin*_*ani 15
最简单的解决方案
<button type="button" onclick="window.location.href='{{ url_for( 'move_forward') }}';">Forward</button>
use*_*563 14
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>
测试文件
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()
听起来您希望将此Web应用程序用作机器人的远程控制,并且核心问题是您不希望每次执行操作时都重新加载页面,在这种情况下,您发布的最后一个链接会回答您的问题问题.
我想你可能会误解Flask的一些事情.例如,您不能在单个路径中嵌套多个函数.您没有为特定路由创建一组可用的函数,而是定义服务器在调用该路由时将执行的一项特定操作.
考虑到这一点,您可以通过将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);
然后在你的HTML中,使用这个:
<form action="/forward/" method="post">
<button name="forwardBtn" type="submit">Forward</button>
</form>
...执行前进代码.包括这个:
{{ forward_message }}
...您希望前进消息显示在模板上.
这将导致您的页面重新加载,这在不使用AJAX和Javascript的情况下是不可避免的.