Here is the setup: I'm running a Flask app off of a Google Compute Engine VM. From a different server (github.io page, for what its worth), I would like to get the information off of the VM. The VM data is json formatted and static for now, but eventually will be scripted to update.
ISSUE: ajax / jquery is able to hit the requested page, however it appears to return no data.
When I run the request from either localhost or production, I can see the GET action popping up on the VM activity log. I've tried running the script as a button, on document ready, and on page load and in each case it appears to hit the VM but does not return data.
When I navigate to the address directly in browser, the JSON comes up normally, and looks like this:
{"otherstuff":"somemorethings","stuff":"Some Number"}
I'm super new to this so it is entirely possible that I'm missing something obvious.
I've tried a bunch of things
- https://stackoverflow.com/questions/5817460/json-data-not-displayed-using-getjson
- https://stackoverflow.com/questions/44465082/json-not-grabbed-by-getjson
- https://stackoverflow.com/questions/24735810/python-flask-get-json-data-to-display
- https://stackoverflow.com/questions/12435297/how-do-i-jsonify-a-list-in-flask
- https://stackoverflow.com/questions/3964552/how-do-i-get-at-the-raw-json-response-from-a-jquery-getjson-request
Flask Code:
import flask
from flask_cors import CORS
app = flask.Flask(__name__)
CORS(app)
@app.route('/', methods=['POST', 'GET'])
def hello():
return flask.jsonify(stuff='Some Number', otherstuff="somemorethings")
if __name__ == '__main__':
app.run(host = '0.0.0.0', port=80)
(I've tried this with and without CORS)
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type=text/javascript>
$(document).ready(function(){
$.get(
"http://[the_vm_external_ip]/",
{format: "json"})
.done(
function(data) {
$("#retval").html( "<strong>" + data.stuff + "</strong>" );
}
);
});
</script>
<script>
$(document).ready(function(){$("#where").append("part 2a");})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function () {
$.getJSON( "http://[the_vm_external_ip]/", function (a) {
$("#where").append(a.stuff);
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div id="where">teste</div>
<div id="retval"></div>
</body>
</html>
I realize this is in there 3 different ways, but since I'm new I wanted to keep potential solutions around in case one of them worked. I've tried each one individually.
For example, the basic append("part 2a") does appear to be working.
Desired result is the text from the Flask result displayed on the github.io page, e.g. "Now I would like to talk about Some Number".
If it helps, I literally just need this one number to be displayed on the page, so if there is a simpler way to do it I'm all ears.
UPDATE: When going to add an example,it just started working. I'm not sure what changed, but it looks like using var plot_id = data.stuff instead of directly referencing data.stuffdid the trick. Working Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type=text/javascript>
$(document).ready(function(){
$.getJSON(
"http://35.226.182.38/",
{format: "json"})
.done(
function(data) {
var plot_id = data.stuff;
$("#retval").html( "<strong>" + plot_id + "</strong>" );
}
);
});
</script>
</head>
<body>
<div id="retval"></div>
</body>
</html>
This code displays Some Number to the retval div, as expected.
