我有一个 Flask 应用程序,它接受一些文本作为输入,运行一个 python 脚本并在同一个 html 页面上输出一个输出,除非它转到一个新页面。我不明白为什么它会转到一个新页面。
这是我的 app.py 文件:
#!/usr/bin/env python3
from flask import *
from flask import render_template
from myclass import myfunction
app = Flask(__name__)
@app.route('/')
def homepage():
return render_template('index.html')
@app.route('/', methods= ["POST"])
def background_process():
if request.method == 'POST':
try:
story = request.form.get('story')
if story:
result = myfunction(story)
return render_template('index.html', **jsonify(result))
else:
return jsonify(result='Input needed')
except Exception as e:
return (str(e))
if __name__ == "__main__":
app.debug=True
app.run()
Run Code Online (Sandbox Code Playgroud)
这是我的 index.html 文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
story: $('textarea[name="story"]').val(),
}, function(data) {
$('#result').text(data.result);
});
return false;
});
});
</script>
</head>
<body>
<div class='container'>
<form>
<textarea id="text_input" rows="20" cols="80" name=story></textarea>
<br>
<a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
</form>
<br>
<p><h2 align='center'>Result:</h2><h2 id=result align='center'></h2></p>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
当给出输入时,它会以 json 格式在新页面中显示结果。我想在同一页面上显示它。这里出了什么问题?谢谢!
由于您已经使用能够处理响应的 ajax 方法,因此您可以直接返回 JSON 响应,而不是渲染新模板:
return jsonify(result=result)
Run Code Online (Sandbox Code Playgroud)
另外,您可能希望将 JQuery 方法的 GET 更改为 POST :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.post('/', {
story: $('textarea[name="story"]').val(),
}, function(data) {
$('#result').text(data.result);
});
return false;
});
});
</script>
</head>
Run Code Online (Sandbox Code Playgroud)
$.post('/background_process'(请注意,如果您保留两个单独的函数,而不是我下面建议的函数,则需要编写。)
然后,您可以将代码收集在一个函数中,模板将使用 GET 方法呈现,并且响应将从 POST 呈现:
app = Flask(__name__)
@app.route('/', methods= ["GET", "POST"])
def homepage():
if request.method == 'POST':
story = request.form.get('story')
if story:
result = myfunction(story)
return jsonify(result=result)
else:
return jsonify(result='Input needed')
return render_template('index.html')
if __name__ == "__main__":
app.debug=True
app.run()
Run Code Online (Sandbox Code Playgroud)