javascript - 如何将数据从 Flask 传递到 Javascript?
问题描述
我一直在尝试制作一个基本的烧瓶应用程序。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})
解决方案
这是一个概念验证应用程序:
./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()
./templates/index.html
<form method="POST" action="/calc" data-calc-form>
<input type="text" name='text'>
<button>Calculate</button>
<pre data-preview></pre>
</form>
<script>
window.addEventListener('DOMContentLoaded', init);
function 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 fetchEstimations(text);
preview.textContent = JSON.stringify(results, null, 4);
});
}
async function fetchEstimations(text) {
const payload = new FormData();
payload.append('text', text);
const res = await fetch('/calc', {
method: 'post',
body: payload
});
const estimation = await res.json();
return estimation;
}
</script>
如何使用 JSON 响应取决于您,这里我只是按原样显示。
推荐阅读
- optimization - 没有集合函数的优化
- javascript - 在视图中调用脚本时设置超时?或在脚本中设置有效超时?
- dart - Widget消失时如何取消正在运行的Timer()
- clearcase - Cleartool - 如何变基并在流中仅保留一个组件
- android-studio - 无法安装 IntelHAXM
- android - Android Camera API exposureTargetOffset 值
- emacs - 在 PyCharm 的切换器上删除或修改 Python 控制台快捷方式
- java - 从文件中打印特定年龄的人
- c# - 如何复制路径来自另一个文件的文件?
- reactjs - getWrappedInstance() 与 WrappedInstance:react-redux @connect 上的属性