Abhinav Bajpai Abhinav Bajpai - 1 year ago 94
jQuery Question

jquery $.get flask function/route 400 bad request

Since i'm working with a relay on a raspberry pi i'm trying to create a page where the button basically switches the relay on/off. Initially i had the flask file request the parameter (button name) from the template and was appropriately taking action on the basis of the button clicked and the relay associated with it by cross referencing it with the relay state. But that creates a problem where every time i click the button the whole page is refreshed. So basically i'm trying to accomplish the same functionality but without using request.form from the flask file. The one way i could figure out was to use jquery/ajax but i'm consistently getting 400 bad request errors even when the click goes through perfectly. Flask after taking action by the jquery request redirects to 400 bad request page.

jquery function:

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

$('#humidityValue').text(" " + data)
setInterval('get_temps()', 4000);
function b1(){
if (message1 == "b1on"){
document.getElementById("B1").style.borderColor = "green";
else if (message1 == "b1off"){
document.getElementById("B1").style.borderColor = "red";
function b2(){
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(){
if (message3 == "b3on"){
$('#B3').style.borderColor = "green";
else if (message3 == "b3off"){
$('#B3').style.borderColor = "red";
function b4(){
if (message4 == "b4on"){
$('#B4').style.borderColor = "green";
else if (message4 == "b4off"){
$('#B4').style.borderColor = "red";


html template:

<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 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 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 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>

flask file:

@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'
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'
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'
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'
gpio.output(relayPins[3], gpio.HIGH)
message4 = 'b4off'
return (message4)

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

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

basically what is going on is when i click any of the 4 buttons the function call for the appropriate function is made which is supposed to initiate the flask route and toggle the gpio output. Up till this part the code is working fine. But after that the flask route is supposed to send a message back to the template which basically determines what color of border the button will have. For the first button actually even that part is working, only for a second. After that the flask file tries to reload /dashboard and all i get is an error saying "POST /dashboard HTTP/1.1" 400 and a page for 400 bad request.

All i want to know is that why is the flask server redirecting the page and how to stop it.

Also the code for retrieving information is working fine when i am trying to get the data from the route that extracts the temperature and humidity data from dht22 sensor and that data is sent to the page with no problems at all. But for buttons i'm constantly getting 400 bad request.

Answer Source

Try onclick="b1(); return false;" (for each button) to prevent the default behavior of submitting the form.