获取Flask数据的请求

Question

我刚开始接触网页开发，正在写一个可以和我的树莓派互动的网页。我已经成功让flask工作了，当我在树莓派上把23号引脚设置为高（Hi）和低（Low）时，运行Python脚本并访问http://192.168.1.45:8080时，它能正确显示“High”和“Low”。但是我不知道怎么在HTML文档中做一个“get”请求，以便从flask返回“High”、“Low”或“Error”。

这是我的文件：

test5.html：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    var countDownSecs = 10;
    var check = null;

    function printCountDown() {
        if (check == null && document.getElementById("counter").innerHTML != 'Launched!') {
            var cnt = countDownSecs;
                check = setInterval(function () {
                    cnt -= 1;
                    document.getElementById("counter").innerHTML = cnt;
                    if (cnt == 0) {
                    launch();
                      }
                }, 1000);
        }
    }

    function stop() {
        clearInterval(check);
        check = null;
        document.getElementById("counter").innerHTML = countDownSecs;
    }

    function launch() {
        $.ajax({
                type: "POST",
                url: "cgi-bin/launch.cgi"
            })
        clearInterval(check);
        check = null;
        document.getElementById("counter").innerHTML = 'Launch';
        setTimeout(function(){
            document.getElementById("counter").innerHTML = countDownSecs;
            $("#launch").attr("disabled","disabled");
        } ,5000);
    }

        function ckcont() {
                $.ajax({
                        type: "POST",
                        url: "cgi-bin/ckconttest.cgi"
            })
        alert ("test");
    }

</script>
</head>
<body>
<style type="text/css">
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
div.ex
{
font-size:350%;
width:230px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
<div class="ex"; div align="center"><span id="counter"><script>document.write(countDownSecs);</script></span></div>
<button id="continuity" style="font-size:20pt;font-weight:600;padding: 20px 15px">Check Continuity</button>

<script>
$(document).ready(function(){
  $("#continuity").click(function(){
    $("p").toggleClass("main");
    $("#launch").removeAttr("disabled");
    ckcont();
  });
});
</script>
<button id="launch" disabled="disabled" style="font-size:20pt;font-weight:600;padding: 20px 15px">Hold to Launch
</button>

<script>
$("#launch").bind( "touchend mouseup", function(e) {
    if (check != null){
        stop();
    }
//$( "body" ).append( "<span style='color:#f00;'>Mouse up.</span><br>" );
});

$("#launch").bind( "touchstart mousedown", function(e) {
printCountDown();
//$( "body" ).append( "<span style='color:#00f;'>Mouse down.</span><br>" );
});
</script>
</body>
</html>

这个CGI脚本只是以root权限运行Python脚本：

ckconttest.cgi：

#!/bin/bash
sudo ./ckconttest.py

ckconttest.py：

#!/usr/bin/env python
from flask import Flask, render_template
import datetime
import RPi.GPIO as GPIO
app = Flask(__name__)
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.setup(18, GPIO.OUT)
GPIO.output(18, True)
GPIO.setup(23, GPIO.IN)
@app.route("/")
def readPin():
    try:
        if GPIO.input(23) == True:
            return "High"
        else:
            return "Low"
    except:
            return "Error"

app.run(host='0.0.0.0', port=8080, debug=True)

在函数ckcont()中，我该如何读取flask传递的“High”、“Low”和“Error”这些文本字符串，并把它们打印到消息框里呢？

非常感谢，
Ed

web development message box HTML flask data retrieval raspberry pi http request cgi scripting

获取Flask数据的请求

2 个回答

撰写回答