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

Question

因为我在 raspberry pi 上使用继电器，所以我正在尝试创建一个页面，其中的按钮基本上可以切换继电器 on/off。最初，我让烧瓶文件从模板请求参数（按钮名称），并根据单击的按钮和与之关联的继电器通过与继电器状态交叉引用来适当地采取行动。但这会产生一个问题，每次我单击按钮时，整个页面都会刷新。所以基本上我试图完成相同的功能，但不使用烧瓶文件中的 request.form 。我能想出的一种方法是使用 jquery/ajax 但我一直收到 400 个错误的请求错误，即使点击完美完成也是如此。 Flask 在 jquery 请求执行操作后重定向到 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 个按钮中的任何一个时，将调用相应函数的函数，该函数应该启动 flask 路由并切换 gpio 输出。直到这部分代码工作正常。但在那之后，flask 路由应该将一条消息发送回模板，该模板基本上确定了按钮的边框颜色。对于第一个按钮，实际上什至那个部分都在工作，只有一秒钟。之后 flask 文件尝试重新加载 /dashboard，我得到的只是一个错误 "POST /dashboard HTTP/1.1" 400 和一个 400 错误请求的页面。

我只想知道为什么 flask 服务器重定向页面以及如何停止它。

当我尝试从从 dht22 传感器提取温度和湿度数据的路径获取数据时，用于检索信息的代码也工作正常，并且该数据毫无问题地发送到页面。但是对于按钮，我不断收到 400 个错误请求。

Answer 1

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

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

jquery $.get flask function/route 400 bad request

python

jquery

jinja2

flask