当前位置: 首页 > 面试题库 >

Flask Button运行Python而无需刷新页面?

欧阳炜
2023-03-14
问题内容

我刚开始使用python和flask(对于树莓派)。我想要一个Web应用程序,该应用程序将执行一些python代码来平移和倾斜摄像机并显示视频流。

到目前为止,我的flask代码是:

from flask import Flask, render_template
import time
import serial
#ser = serial.Serial('/dev/ttyUSB0',9600)
app = Flask(__name__)
@app.route('/')
@app.route('/<cmd>') #each button in my html redirects to a specified directory
def execute(cmd=None):
    if cmd == "down":
        print "Moving Down"
        #ser.write("D")

    if cmd == "up":
        print "Moving Up"
        #ser.write("U")

    if cmd == "left":
        print "Moving Left"
        # ser.write("L")

    if cmd == "right":
        print "Moving Right"
        #ser.write("R")

    if cmd == "reset":
        print "Reseting.."
        #ser.write("X")

    return render_template("main.html")


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080, debug=True)

问题是我的代码依赖于重定向到新目录的每个按钮,尽管效果很好,但是每次刷新页面都会刷新,这意味着我的嵌入式视频会重新加载和缓冲。有没有更好的方法来检测按下按钮,然后使用flask执行python代码?


问题答案:

我将其分为两条路线,以使你更轻松地了解所要做的事情:

LEFT, RIGHT, UP, DOWN, RESET = "left", "right", "up", "down", "reset"
AVAILABLE_COMMANDS = {
    'Left': LEFT,
    'Right': RIGHT,
    'Up': UP,
    'Down': DOWN,
    'Reset': RESET
}

@app.route('/')
def execute():
    return render_template('main.html', commands=AVAILABLE_COMMANDS)

@app.route('/<cmd>')
def command(cmd=None):
    if cmd == RESET:
       camera_command = "X"
       response = "Resetting ..."
    else:
        camera_command = cmd[0].upper()
        response = "Moving {}".format(cmd.capitalize())

    # ser.write(camera_command)
    return response, 200, {'Content-Type': 'text/plain'}

然后,在模板中,你只需要使用一些JavaScript发送请求即可:

{# in main.html #}
{% for label, command in commands.items() %}
    <button class="command command-{{ command }}" value="{{ command }}">
        {{ label }}
    </button>
{% endfor %}

{# and then elsewhere #}
<script>
// Only run what comes next *after* the page has loaded
addEventListener("DOMContentLoaded", function() {
  // Grab all of the elements with a class of command
  // (which all of the buttons we just created have)
  var commandButtons = document.querySelectorAll(".command");
  for (var i=0, l=commandButtons.length; i<l; i++) {
    var button = commandButtons[i];
    // For each button, listen for the "click" event
    button.addEventListener("click", function(e) {
      // When a click happens, stop the button
      // from submitting our form (if we have one)
      e.preventDefault();

      var clickedButton = e.target;
      var command = clickedButton.value;

      // Now we need to send the data to our server
      // without reloading the page - this is the domain of
      // AJAX (Asynchronous JavaScript And XML)
      // We will create a new request object
      // and set up a handler for the response
      var request = new XMLHttpRequest();
      request.onload = function() {
          // We could do more interesting things with the response
          // or, we could ignore it entirely
          alert(request.responseText);
      };
      // We point the request at the appropriate command
      request.open("GET", "/" + command, true);
      // and then we send it off
      request.send();
    });
  }
}, true);
</script>


 类似资料:
  • 问题内容: 我有一个网站需要更新状态。就像飞行一样,您要离开,巡航或着陆。我希望能够刷新状态而无需让观众拥有并重新加载整个页面。我知道有一种使用AJAX和jQuery的方法,但是我对它的工作原理没有任何了解。我也不希望他们单击​​按钮。如果有人知道该怎么做,我将不胜感激! 问题答案: 通常,如果您不知道某些事情是如何工作的,请寻找可以学习的示例。 对于此问题,请考虑 您可以看到使用jQuery很容

  • 问题内容: 我有一个文件,其中我在页面顶部显示外部页面(使用iframe),其他部分是写在文件中的html代码的输出。 HTML代码如下所示: 现在,我想以编程方式刷新页面而不刷新。 我的问题是我可以不刷新页面就刷新页面吗? 答案/提示将不胜感激。 问题答案: 该嵌在主HMTL页面(或在JSP)。因此,如果刷新页面,则肯定会再次加载iframe。 为了避免这种情况,我可以考虑以下两种选择: 使用A

  • 问题内容: 我从数据库获取数据并将其显示在div中…我要做的是单击链接时应更改div的内容 一种选择是通过URL将参数传递给自身并重新加载页面… 我需要这样做而 无需重新加载\刷新 … 目的是当我单击任何链接时,div和php变量的内容无需刷新即可更新....这样 用户可以看到新数据 ,然后如果执行某些查询,它将在新变量上 ps我知道它将需要一些AJAX,但我不知道AJAX ..所以请以我可以学习

  • 问题内容: 在我的视图中获取数据的代码如下所示: 我模板中的代码看起来像这样,效果很好。现在,问题是我希望该表每10秒更新一次其信息,而不刷新整个页面。视图的URL为/,模板的名称为home。 urls.py看起来像这样 你们谁能对此有所了解,我将不胜感激! 问题答案: 您可以使用,以及: 您的HTML JS 视图 get_more_tables.html 然后只需确保将新视图添加到您的视图中 (

  • TL;DR使用AngularFirestore和离子/角度。我希望在用户设备(例如表单上的复选框)之间同步数据,而不会导致所有用户的整页刷新。 我是爱奥尼亚/Angular应用程序的快乐用户,该应用程序用于促进我管理的咖啡店的工作。我在应用程序中有一个现有的清单功能。 该应用程序是使用FireStore作为后端实现的,我使用的是AngularFirestore API。 我在咖啡馆里有几款运行该应

  • 问题内容: 我正在使用$ _SESSION变量通过AJAX发送电子邮件(它们需要在不刷新页面的情况下发送),但是$ _SESSION变量不会自动更新,因此当它更改时,我需要刷新页面以更新变量。 是否可以不刷新而更新$ _SESSION变量? 这是我用来发送电子邮件的代码: 因此,基本上,如果$ _SESSION变量更改,则需要此AJAX电子邮件来识别它,而无需刷新。 谢谢你的帮助 问题答案: 当您