Question

非常新的网页开发和编写将与我的覆盆子pi互动的网页。我的烧瓶工作正常，当针23在我的覆盆子pi上设置为Hi和Low时，它正确打印＆＃34; High＆＃34;和＆＃34;低＆＃34;当我运行python脚本并浏览到http：192.168.1.45：8080。我无法弄清楚如何做一个＆＃34;得到＆＃34;在HTML文档中返回＆＃34;高＆＃34;，＆＃34;低＆＃34;或＆＃34;错误＆＃34;从烧瓶。

以下是我的文件：

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文本字符串并将字符串打印到消息框？

非常感谢，编

Answer 1

假设你的其余代码是正确的，我看到你使用cgi和python脚本的方式至少有一个问题。

根据您的描述，cgi-bin / ckconttest.cgi脚本只是在sudo模式下调用./ckconttest.py，而./ckconttest.py根据GPIO返回字符串“High”或“Low”引脚状态。

由于web服务器正在调用cgi-bin / ckconttest.cgi，并且cgi脚本只是消耗ckcontest.py的输出而而不是返回任何内容，所以你不会得到高和低回到浏览器。

您有两种选择 -

直接调用ckconttest.py而不是cgi-bin / ckconttest.cgi
如果由于某种原因你不能，那么使用子进程模块来调用 PY文件，读取其输出，返回。

以下是使用子进程调用其他可执行文件的一个很好的参考 - http://pymotw.com/2/subprocess/

Answer 2

您需要修改目前的ckcont功能：

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

首先，您的@app.route("/")不接受POST请求，只接受GET。并且您需要为成功（和错误）条件指定一些回调。这些内容：http://jsfiddle.net/FQeg8/4/：

$.ajax({
    url: "/cgi-bin/ckconttest.cgi",
    type: "GET",
    success: function(data, status, xhr) {
        alert(data.ip);
    },
    error: function(xhr, status, error) {
        console.log(xhr, status, error);
    }
});

获取烧瓶数据的请求

2 个答案: