Python Flask和HTML:重定向json响应以显示在同一页面的底部,而不是在单独的页面上显示响应
网络开发的新概念。。我正在使用Flask部署一个sklearn机器学习模型 我能够正确地将响应预测作为JSON返回,但它显示在单独的页面上。。我想修改我的HTML和FlaskPython Flask和HTML:重定向json响应以显示在同一页面的底部,而不是在单独的页面上显示响应,python,html,python-3.x,flask,response,Python,Html,Python 3.x,Flask,Response,网络开发的新概念。。我正在使用Flask部署一个sklearn机器学习模型 我能够正确地将响应预测作为JSON返回,但它显示在单独的页面上。。我想修改我的HTML和Flaskapp.py,以使预测响应显示在HTML中表单底部新创建的容器元素中 这是我的index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-s
app.py
,以使预测响应显示在HTML中表单
底部新创建的容器元素中
这是我的index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}">
</head>
<body>
<div class = 'intro'>
This is a simple website that hosts a Machine Learning model trained using <i>sklearn</i> to predict one of three authors:
<b>HP Lovecraft</b>, <b>Edgar Allan Poe</b> and <b>Mary Shelley</b>. Simply enter a passage of one of those three authors and you will get a prediction.
</div>
<div class="authorimage">
<div class="row">
<div class="column">
<h2>Mary Shelley</h2>
<p><img src = "{{ url_for('static',filename='img/mary.jpeg') }}"></p>
</div>
<div class="column">
<h2>H.P Lovecraft</h2>
<p><img src = "{{ url_for('static',filename='img/lovecraft.jpeg') }}"></p>
</div>
<div class="column">
<h2>Edgar Allan Poe</h2>
<p><img src = "{{ url_for('static',filename='img/eap.jpeg') }}"></p>
</div>
</div>
</div>
<div class = 'input'>
<form action="/api" method="POST">
<textarea name = "passage_input" cols="35" wrap="soft"></textarea>
<input type="submit">
</form>
</div>
<div class = "prediction">
Not sure how to collect the response from app.py into a box here..
</div>
</body>
</html>
您可以在jinja中使用for以html格式解析json结果,如:
{% for key, value in results %}
<span>{{key}} : {{value}}</span>
{% endfor %}
您必须使用
jquery
动态更新页面:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
...
<div class = 'input_wrapper'>
<textarea name = "passage_input" cols="35" wrap="soft" class="paragraph"></textarea>
<button class='predict'>Predict</button>
</form>
</div>
<div class = "prediction"></div>
</body>
<script>
$(document).ready(function(){
$('.input_wrapper').on('click', '.predict', function(){
var data = $('.paragraph').val();
$.ajax({
url: "/api",
type: "get",
data: {text:data},
success: function(response) {
$(".prediction").html(response.name);
}
});
});
});
</script>
</html>
现在,当单击“预测”按钮时,javascript从
文本区域
获取输入的文本,并动态调用路由'/api'
,并用结果更新预测
div。不确定为什么会有否决票。。
return render_template("index.html", results = your result)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
...
<div class = 'input_wrapper'>
<textarea name = "passage_input" cols="35" wrap="soft" class="paragraph"></textarea>
<button class='predict'>Predict</button>
</form>
</div>
<div class = "prediction"></div>
</body>
<script>
$(document).ready(function(){
$('.input_wrapper').on('click', '.predict', function(){
var data = $('.paragraph').val();
$.ajax({
url: "/api",
type: "get",
data: {text:data},
success: function(response) {
$(".prediction").html(response.name);
}
});
});
});
</script>
</html>
@app.route('/api')
def predict():
text_input = request.args.get('text')
return flask.jsonify({'name':parse(pd.Series([text_input]))})