Question

我正在用python构建网站，我希望能够通过一个按钮来启动和停止“ motiondetect.py”。（合并两个按钮）现在，我有两个单独的“ 开始运动检测”和“ 停止运动检测”按钮。我想让合并* 按钮在您第一次单击时启动运动检测，而第二次单击应将其停止。

这是我的代码段：

Python开始：

@app.route("/start", methods=["GET", "POST"])
def start_motion():
    global proc
    #global FNULL
    #global APP_ROOT
    print(" > Start")
    proc = subprocess.Popen(["python", "motiondetect.py"])#, stdout=FNULL, 
    stderr=subprocess.STDOUT)
    print(" > Process id {}".format(proc.pid))
    return "Start Detection"

HTML开始：

    $(document).ready(function(){
      $("#start_button").click(function(e){
   e.preventDefault();
$.ajax({type: "POST",
url: "/start",
data: {},
success:function(result){
  $("#start_button").html(result);
}});
      });

    });

Python Stop：

@app.route("/stop", methods=["GET", "POST"])
def stop_motion():
    global proc
    print(" > Stop")
    proc.kill()
    #os.system("echo > close")
    #print(" > Process killed")
    #time.sleep(2)
    #os.system("rm close")
    return "Stop Detection"

Html Stop：

    $(document).ready(function(){
      $("#stop_button").click(function(e){
   e.preventDefault();
$.ajax({type: "POST",
url: "/stop",
data: {},
success:function(result){
  $("#stop_button").html(result);
}});
      });

感谢您的时间，对我的无知表示歉意。

Answer 1

好的，为了您的方便，我举了一个例子向您介绍这些想法。这就是您可以在Flask部件上执行的操作。

from Flask import request
@app.route("/start", methods=["GET", "POST"])
def start_motion(request):
    global proc
    #global FNULL
    #global APP_ROOT
    data = json.loads(request.data.decode("utf-8"))
    #data here is {'exam': 'a text'} a dict in this case
    state = data["state"]
    if (state and state=="start"):
        print(" > Start")
        proc = subprocess.Popen(["python", "motiondetect.py"])#, stdout=FNULL, 
        stderr=subprocess.STDOUT
        print(" > Process id {}".format(proc.pid))
        return "Start Detection"

    else:
        print("the state is blank or is not requesting to start")

@app.route("/stop", methods=["GET", "POST"])
def stop_motion(request):
    global proc
    print(" > Stop")
    data = json.loads(request.data.decode("utf-8"))
    #data here is {'exam': 'a text'} a dict in this case
    state = data["state"]
    if (state and state=="start"):
        proc.kill()
    #os.system("echo > close")
    #print(" > Process killed")
    #time.sleep(2)
    #os.system("rm close")
    else:
        print("state is either blank or not stop")
    return "Stop Detection"

我只是添加了代码以接收来自Ajax调用的state数据并在后端进行。

您可以在HTML和Javascript方面做到这一点：

   $(document).ready(function(){
   $("#motion_button").click(function(e){
    e.preventDefault();
    state = $(this).attr('value'); 
    if(state=="start")
    {
        $("#motion_button").attr("value")= "stop";
        $("#motion_button").text("Stop")
        callurl="/start"
    }
    elseif(state=="stop")
    {
        $("#motion_button").attr("value")= "start";
        $("#motion_button").text("Start")
        callurl="/stop"
    }


    $.ajax({type: "POST",
    url: "/start",
    data: {"state":state},
    success:function(result){
      $("#start_button").html(result);
    }});
     });

    });

由于您使用的是POST方法来发送数据，因此您可能还必须考虑发送csrf令牌。我希望您能理解前端代码，因为它们非常简单。另外，请参考我的答案Can't send data back to Django from JS AJAX，其中包含完整的示例，以供参考。

如何为Flask网站合并两个HTML按钮？

1 个答案: