jquery $ .get flask 함수 / route 400 잘못된 요청

라즈베리 파이에서 릴레이로 작업하고 있기 때문에 버튼이 기본적으로 릴레이를 켜거나 끄는 페이지를 만들려고합니다. 처음에는 플라스크 파일이 템플릿에서 매개 변수 (버튼 이름)를 요청하고 클릭 한 버튼 및 릴레이 상태와 상호 참조하여 연결된 릴레이를 기반으로 적절히 조치를 취했습니다. 하지만 버튼을 클릭 할 때마다 전체 페이지가 새로 고쳐지는 문제가 발생합니다. 그래서 기본적으로 동일한 기능을 수행하려고하지만 플라스크 파일에서 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 출력을 토글하는 적절한 기능에 대한 함수 호출이 만들어집니다. 이 부분까지 코드는 잘 작동합니다. 그러나 그 후 플라스크 경로는 기본적으로 버튼의 테두리 색상을 결정하는 템플릿으로 메시지를 다시 보내야합니다. 첫 번째 버튼의 경우 실제로 해당 부분조차도 작동합니다. 그 후 플라스크 파일이 / dashboard를 다시로드하려고 시도하고 "POST / dashboard HTTP / 1.1"400이라는 오류와 400 개의 잘못된 요청에 대한 페이지 만 표시됩니다.

내가 알고 싶은 것은 플라스크 서버가 페이지를 리디렉션하는 이유와 중지 방법입니다.

또한 dht22 센서에서 온도 및 습도 데이터를 추출하는 경로에서 데이터를 가져 오려고 할 때 정보 검색 코드가 제대로 작동하고 해당 데이터가 전혀 문제없이 페이지로 전송됩니다. 그러나 버튼의 경우 지속적으로 400 개의 잘못된 요청이 있습니다.