Question

由于我在覆盆子pi上使用继电器，我试图创建一个按钮基本上打开/关闭继电器的页面。最初我让烧瓶文件从模板请求参数（按钮名称），并根据点击的按钮和与之关联的继电器通过交叉引用它与继电器状态进行相应的操作。但是这会产生一个问题，每次我点击按钮都会刷新整个页面。所以基本上我试图完成相同的功能，但不使用flask文件中的request.form。我可以想出的一种方法是使用jquery / ajax，但即使点击完全通过，我仍然会遇到400个错误的请求错误。在通过jquery请求执行操作后，Flask重定向到400个错误的请求页面。

jquery函数：

    <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.1.0.js') }}"></script>
        <script type=text/javascript>
        function get_temps(){
            $.getJSON("dhtTemp", 
                function(temperature){
                    $('#temperatureValue').text(temperature)

                }
            );
            $.getJSON("dhtHum", 
                function(data){
                    $('#humidityValue').text(" " + data)
                }
            );
        }
        setInterval('get_temps()', 4000);
        function b1(){
            $.get("b1",
                function(message1){
                    if (message1 == "b1on"){
                        document.getElementById("B1").style.borderColor = "green";
                    }
                    else if (message1 == "b1off"){
                        document.getElementById("B1").style.borderColor = "red";
                    }
                }
            );
        }
        function b2(){
            $.getJSON("b2",
                function(message){
                    file = fopen("/home/pi/Desktop/text.txt",3);
                    fwrite(file, message);
                    /*if (message2 == "b2on"){
                        $('#B2').style.borderColor = "green";
                    }
                    else if (message2 == "b2off"){
                        $('#B2').style.borderColor = "red";
                    }*/
                }
            );
        }
        function b3(){
            $.getJSON("b3",
                function(message3){
                    if (message3 == "b3on"){
                        $('#B3').style.borderColor = "green";
                    }
                    else if (message3 == "b3off"){
                        $('#B3').style.borderColor = "red";
                    }
                }
            );
        }
        function b4(){
            $.getJSON("b4",
                function(message4){
                    if (message4 == "b4on"){
                        $('#B4').style.borderColor = "green";
                    }
                    else if (message4 == "b4off"){
                        $('#B4').style.borderColor = "red";
                    }
                }
            );
        }

    </script>

html模板：

<div id="buttonsBar">
                    <div id="buttons">
                        <button type="submit" value="Button1" class="Bsettings" id="B1" name="B1" onclick="b1()"><span class="off">Button1</span><span class="on">Button1</span></button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button2" class="Bsettings" id="B2" name="B2" onclick="b2()"><span class="off">Button2</span><span class="on">Button2</span></button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button3" class="Bsettings" id="B3" name="B3" onclick="b3()"><span class="off">Button3</span><span class="on">Button3</span></button>
                    </div>
                    <div id="buttons">
                        <button type="submit" value="Button4" class="Bsettings" id="B4" name="B4" onclick="b4()"><span class="off">Button4</span><span class="on">Button4</span></button>
                    </div>
                </div>

烧瓶文件：

@app.route('/dashboard', methods=['GET','POST'])
def dashboard():
if request.method == 'POST':
    if request.form['submit'] == 'Network':
        return redirect(url_for('network'))
    elif request.form['submit'] == 'Module Name':
        return redirect(url_for('hostname'))
return render_template('mainUi.html')

@app.route('/b1', methods=['GET','POST'])
def b1():
global message1
if gpio.input(relayPins[0]) == 1:
    gpio.output(relayPins[0], gpio.LOW)
    message1 = 'b1on'
else:
    gpio.output(relayPins[0], gpio.HIGH)
    message1 = 'b1off'
return (message1)

@app.route('/b2', methods=['GET','POST'])
def b2():
if gpio.input(relayPins[1]) == 1:
    gpio.output(relayPins[1], gpio.LOW)
    message2 = 'b2on'
else:
    gpio.output(relayPins[1], gpio.HIGH)
    message2 = 'b2off'
return (message2)

@app.route('/b3', methods=['GET','POST'])
def b3():
if gpio.input(relayPins[2]) == 1:
    gpio.output(relayPins[2], gpio.LOW)
    message3 = 'b3on'
else:
    gpio.output(relayPins[2], gpio.HIGH)
    message3 = 'b3off'
return (message3)

@app.route('/b4', methods=['GET','POST'])
def b4():
if gpio.input(relayPins[3]) == 1:
    gpio.output(relayPins[3], gpio.LOW)
    message4 = 'b4on'
else:
    gpio.output(relayPins[3], gpio.HIGH)
    message4 = 'b4off'
return (message4)

@app.route('/dhtTemp', methods=['GET','POST'])
def readTemperature():
#sleep(3)
dht22.trigger()
temperature = str('%.2f' % (dht22.temperature()))
return (temperature)

@app.route('/dhtHum', methods=['GET','POST'])
def readHumidity():
#sleep(3)
dht22.trigger()
humidity = str('%.2f' % (dht22.humidity()))
return (humidity)

基本上发生了什么，当我点击4个按钮中的任何一个按钮时，函数调用了相应的函数，它应该启动烧瓶路径并切换gpio输出。直到这部分代码工作正常。但在此之后，烧瓶路线应该向模板发送消息，该消息基本上确定了按钮将具有的边框颜色。对于第一个按钮实际上即使该部分正在工作，也只有一秒钟。之后，烧瓶文件尝试重新加载/仪表板，所有我得到的是一个错误说＆＃34; POST /仪表板HTTP / 1.1＆＃34; 400和一个400错误请求的页面。

我想知道的是为什么烧瓶服务器会重定向页面以及如何停止它。

当我试图从路径中获取来自dht22传感器的温度和湿度数据的数据时，检索信息的代码工作正常，并且该数据被发送到页面而没有任何问题。但对于按钮，我不断得到400个不良请求。

Answer 1

尝试onclick="b1(); return false;"（对于每个按钮）以防止提交表单的默认行为。

jquery $ .get flask函数/ route 400错误请求

1 个答案: