Вот настройки:
Я запускаю приложение Flask с виртуальной машины Google Compute Engine. С другого сервера (страница github.io, для чего она стоит), я хотел бы получить информацию от виртуальной машины. Данные виртуальной машины на данный момент отформатированы в json и являются статическими, но в конечном итоге будут обновлены по сценарию.
ВЫПУСК: ajax / jquery может попасть на запрошенную страницу, однако, похоже, не возвращает никаких данных.
Когда я запускаю запрос с локального или производственного компьютера, я вижу, как в журнале активности виртуальной машины появляется действие GET. Я пытался запустить скрипт как кнопку, при готовности документа и при загрузке страницы, и в каждом случае он, кажется, попадает в виртуальную машину, но не возвращает данные.
Когда я перемещаюсь по адресу непосредственно в браузере, JSON появляется нормально и выглядит так:
{"otherstuff":"somemorethings","stuff":"Some Number"}
Я супер новичок в этом, поэтому вполне возможно, что я упускаю что-то очевидное.
Я пробовал кучу вещей
Код колбы:
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)
(я пробовал это с 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>
Я понимаю, что есть три разных способа, но, поскольку я новичок, я хотел сохранить возможные решения на случай, если один из них сработает. Я пробовал каждый из них в отдельности.
Например, базовое приложение («часть 2а»), похоже, работает.
Желаемый результат - это текст из результата Flask, отображаемый на странице github.io, например, «Теперь я хотел бы поговорить о каком-то номере».
Если это поможет, мне буквально нужно, чтобы это одно число отображалось на странице, поэтому, если есть более простой способ сделать это, я весь слух.
ОБНОВЛЕНИЕ: когда собирался добавить пример, он только начал работать. Я не уверен, что изменилось, но похоже, что использование var plot_id = data.stuff вместо прямой ссылки data.stuff дало результат. Рабочий код:
<!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>
Этот код отображает Некоторое число в ответном div, как и ожидалось.