jQuery .get JSON не работает с приложением flask - PullRequest
0 голосов
/ 28 мая 2020

У меня есть приложение flask, которое я пытаюсь отправить в браузер и обработать. Но линия с $.getJSON() не работает. Список приведен ниже:

app.py

from flask import Flask, render_template


app = Flask(__name__)

@app.route('/')
def index_html():

    data = {"this":"is", "just":"a test"}

    return render_template('index.html', data=data)


if __name__ == '__main__':

    app.run(debug=True)

index. html

<html>
<head>
    <script src="{{url_for('static', filename='jquery-3.5.1.min.js')}}"></script>
    <script src="{{url_for('static', filename='leaflet/leaflet.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static', filename='leaflet/leaflet.css')}}">
    <link rel="stylesheet" href="{{url_for('static', filename='app.css')}}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>
    <h1>My test that doesn't work</h1>
    <div id="llmap"></div>

    <script src="{{url_for('static', filename='app.js')}}"></script>
</body>

приложение. js

console.log("before")

$.getJSON("/", function(data){
    console.log("during")
    console.log(JSON.stringify(data));
});

console.log('after')

ВЫХОД консоли

before
after

Даже если бы мои данные были каким-то образом испорчены, я бы ожидайте, по крайней мере, увидеть

before
during
after

Что я здесь не понимаю, почему getJSON() не срабатывает?

1 Ответ

0 голосов
/ 28 мая 2020

Вы используете

return render_template('index.html', data=data)

Вы должны возвращать ТОЛЬКО данные при вызове функции .getJSON. простой

return data

должен работать. Поскольку get JSON не разрешает POST-запрос, вам придется добавить еще один маршрут

@app.route('/')
def index_html():
   return render_template('index.html')
@app.route("/getjson")
def json():
   data = {"this":"is", "just":"a test"}
   return data

и изменить свой getJSON запрос на

$.getJSON("/getjson", function(data){
    console.log("during")
    console.log(JSON.stringify(data));
});
...