I'm currently trying to display a list of values that get updated every 5 seconds to a sqlite database.
I can manage to convert the results to a JSON format by using the following code:
@app.route('/_status', methods= ['GET', 'POST'])
def get_temps():
db = get_db()
cur = db.execute('select sensor_name, temp from cur_temps ORDER BY sensor_name')
#cur_temps = cur.fetchall()
return jsonify(cur.fetchall())
Navigating to the webpage through a browser returns
{
"BoilerRoom": 26.44,
"Cylinder1": 56.81,
"Cylinder2": 39.75,
"Cylinder3": 33.94
}
I would like to have this data updated on a webpage periodically without loading the whole page again. I'm getting stuck at the first hurdle and cant get the actual data to display. The HTML code I'm using is
{% extends "layout.html" %}
{% block body %}
<script type=text/javascript>
$(function() {
$("#submitBtn").click(function() {
$.ajax({
type: "GET",
url: $SCRIPT_ROOT + "_status",
contentType: "application/json; charset=utf-8",
success: function(data) {
$('#Result').text(data.value);
}
});
});
});
</script>
<strong><div id='Result'></div></strong>
{% endblock %}
I've picked code from examples but I'm in need of a pointer.
SOLVED!!
New HTML Code
<script type=text/javascript>
function get_temps() {
$.getJSON("_status",
function (data) {
$('#Cyl1').text(data.Cylinder1)
$('#Cyl2').text(data.Cylinder2)
$('#Cyl3').text(data.Cylinder3)
$('#BRoom').text(data.BoilerRoom);
}
);
}
setInterval('get_temps()', 5000);
</script>
<table id="overview">
<tr>
<th>Location</th>
<th>Temperature</th>
</tr>
<tr>
<td>Cylinder Top</td>
<td id="Cyl1"></td>
</tr>
<tr>
<td>Cylinder Middle</td>
<td id="Cyl2"></td>
</tr>
<tr>
<td>Cylinder Bottom</td>
<td id="Cyl3"></td>
</tr>
<tr>
<td>Boiler Room</td>
<td id="BRoom"></td>
</tr>
</table>
There are two methods you can use to return JSON data in your Flask application's view: by returning a Python dictionary, or by using Flask's jsonify() method.
To request JSON from a URL using Python, you need to send an HTTP GET request to the server and provide the Accept: application/json request header with your request. The Accept header tells the server that our Python client is expecting JSON.
Your AJAX call should auto-detect a JSON response, but it won't hurt to explicitly tell jQuery about it:
$.ajax({
type: "GET",
url: $SCRIPT_ROOT + "_status",
dataType: 'json',
success: function(data) {
$('#Result').text(data);
}
);
The contentType
parameter is only used for a POST request, telling the server what type of data you sent.
The data
object contains whatever your Flask jsonify()
response returned; in this case it'll be a JavaScript Object with the BoilerRoom
, etc. keys.
Since you are loading JSON over a GET request, you may as well use the jQuery.getJSON()
method here:
$.getJSON(
$SCRIPT_ROOT + "_status",
function(data) {
$('#Result').text(data);
}
);
This does exactly the same as the $.ajax()
call but you get to omit the type
and dataType
parameters, and the url
and success
parameters are just positional elements.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With