Как передать данные из Flask в Javascript?

Question

Я пытался сделать базовое приложение для колб. Я вернул строку processed text в формате jasonify в файле app.py. Но я не знаю, как получить конкретное строковое значение в переменную java-script в файле index.html.

Может кто-нибудь помочь мне с этим? Следующий код является частью файла app.py:

@app.route('/', methods = ['POST'])
def my_form_post():
    MAX_SEQUENCE_LENGTH = 30

    best_model =  load_model('BalanceNet.h5')
    #data2 = pd.read_csv('train.csv')
    text = request.form['u']
    x = text.split(' ')
    y = [int(k) for k in x]
    data_int_t = pad_sequences([y, [], [], [], []], padding='pre', maxlen=(MAX_SEQUENCE_LENGTH-5))
    data_test = pad_sequences(data_int_t, padding='post', maxlen=(MAX_SEQUENCE_LENGTH))
    y_prob = best_model.predict(data_test)
    processed_text = str(y_prob[0][0])

    return jsonify({'request' : processed_text})

Answer 1

Вот приложение для проверки концепции:

---

. / App.py

from flask import Flask, jsonify, request, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/calc', methods=['POST'])
def calc_estimation():
    text = request.form['text']
    results = process_text(text)
    return jsonify(results)

def process_text(text: str) -> str:
    return [text.upper()] * 10

if __name__ == '__main__':
    app.run()

---

. / Шаблоны / index.html

    
    Calculate
    

window.addEventListener ('DOMContentLoaded', init); функция init () { const form = document.querySelector ('[data-calc-form]'); const textInput = document.querySelector ('[name = text]'); const preview = document.querySelector ('[data-preview]'); form.addEventListener ('submit', async (e) => { e.preventDefault (); const text = textInput.value; const results = await fetchEsvaluations (текст); preview.textContent = JSON.stringify (results, null, 4); }); } асинхронная функция fetchEstimates (текст) { const payload = new FormData (); payload.append ('текст', текст); const res = ожидание получения ('/ calc', { метод: «пост», тело: полезная нагрузка }); оценка const = await res.json (); оценка возврата; }

---

Когда вы запускаете приложение, вы получаете страницу, подобную этой:

Когда вы вводите текст и нажимаете «Рассчитать», вы получаете результат, напечатанный в <pre>

Как вы используете ответ JSON, зависит от вас, здесь я просто отобразил его как есть.