jquery $。フラスコ機能/ルート400不良リクエスト

Question

私はラズベリーパイのリレーで作業しているので、ボタンが基本的にリレーのオン/オフを切り替えるページを作成しようとしています。最初は、テンプレートからフラスコファイル（ボタン名）を要求し、クリックされたボタンとそれに関連付けられたリレーに基づいて、リレー状態と相互参照することによって適切にアクションを実行していました。しかし、それは問題が発生し、ボタンをクリックするたびにページ全体がリフレッシュされます。だから基本的に私は同じ機能を達成しようとしていますが、フラスコファイルからrequest.formを使用しません。私が把握できる1つの方法は、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出力を切り替えることになっている適切な機能の呼び出しが行われる。この部分までコードは正常に動作しています。しかしその後、フラスコのルートは、基本的にボタンの境界線の色を決定するメッセージをテンプレートに送り返すことになっています。最初のボタンでは、実際にはその部分だけが動作しています。その後、フラスコファイルは/ダッシュボードをリロードしようとすると、私は "POST /ダッシュボードHTTP/1.1" 400と400の悪い要求のページを表示するエラーです。

私が知りたいのは、なぜフラスコサーバーがページをリダイレクトして、それを停止するのかということです。

また、dht22センサーから温度と湿度のデータを抽出するルートからデータを取得しようとしているときに、情報を取得するためのコードが正常に動作しています。しかし、ボタンのために私は絶えず400悪い要求を得ています。

Answer 1

onclick="b1(); return false;"（ボタンごとに）を試して、フォームを送信する際のデフォルトの動作を妨げます。