jquery $.get flask function/route 400 bad request

Question

由于我正在使用树莓派上的继电器，因此我正在尝试创建一个页面，其中按钮基本上可以打开/关闭继电器。最初，我让烧瓶文件从模板中请求参数（按钮名称），并根据单击的按钮和与其关联的继电器通​​过将其与继电器状态交叉引用来适当地采取行动。但这会产生一个问题，每次我单击按钮时都会刷新整个页面。所以基本上我正在尝试完成相同的功能，但不使用烧瓶文件中的 request.form 。我能想到的一种方法是使用 jquery/ajax，但即使点击完美，我也一直收到 400 个错误请求错误。 Flask 采取行动后被 jquery 请求重定向到 400 bad request 页面。

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 输出。到目前为止，代码工作正常。但在那之后，烧瓶路线应该向模板发送一条消息，该模板基本上确定按钮将具有什么颜色的边框。对于第一个按钮，实际上即使该部分正在工作，也只是一秒钟。之后，flask 文件尝试重新加载 /dashboard，我得到的只是一个错误，说“POST /dashboard HTTP/1.1”400 和一个 400 错误请求的页面。

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

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

Answer 1

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