【发布时间】：2019-04-16 22:10:50
【问题描述】：
上下文
我在主页上创建了一个包含表单的烧瓶应用程序。用户应下载并重新上传填写好的模板文件，然后填写表格。提交此表单时，会在后端对上传的文件调用 python 脚本，最终生成一个.html 文件。
期望的结果
最初，我将生成的 .html 文件显示在不同的 URL 上（通过重定向），但我想要的是将表单显示在主页的左半部分，以及 html 结果显示在它旁边，在主页的右半边。
我正在努力解决如何实现这一点，特别是在指定我希望结果出现在页面上的哪个位置时，并且怀疑我需要使用 JavaScript（我不熟悉）。我尝试了“锚定”方法，但这对我也不起作用。我真的很感激这方面的任何指导！谢谢:)
代码
app.py：
def upload():
if request.method == 'POST':
if request.form['affiliation'] == "letter":
affiliation = "let"
elif request.form['affiliation'] == "number":
affiliation = "num"
proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
time.sleep(0.5) #wait for html file to be created before going to the results page.
return redirect(url_for('upload'))
return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
index.html：
{% extends "layout.html" %}
{% block body %}
<div class="container">
<div style="text-align:left">
<br>
<h1>Author List Script</h1>
</div>
<section id="intro" class="main">
<div class="row">
<div class="column">
<h6>Download the template file below and re-upload with your custom author information</h6><br>
<a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br><br>
<form action="" method=post enctype=multipart/form-data>
<div id="buttonDiv">
<p><input type=file name=file value="Choose File">
<p>Mark affiliations with:</p>
<input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number" checked>Number</label><br>
<input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
<br><br>
</div>
<input type=submit value=Upload></p>
</form>
</div>
<div class="column">
<h4>Results</h4>
<!-- Where I want the results to appear -->
</div>
</div>
</section>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
{% endblock %}
更新
我了解如何将主页分为列，但我仍然不了解如何指定我希望 python 生成的.html（称为authorList.html）文件显示在@的Where I want the results to appear 部分987654329@。
以前，我设置它以便upload 路由重定向到results 路由，然后results 路由简单地呈现结果authorList.html。但是，如何在 index.html 的特定部分中指定要呈现模板的位置？我需要在index.html 中执行类似<a href="authorList.html"> 的操作吗？
以前的代码
@app.route("/", methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
if request.form['affiliation'] == "letter":
affiliation = "let"
elif request.form['affiliation'] == "number":
affiliation = "num"
proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
time.sleep(0.5) #wait for html file to be created before going to the results page.
return redirect(url_for('results'))
return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
@app.route('/results')
def results():
return render_template('authorList.html')
更新 2：我的尝试
我尝试使用 JQuery 函数将 authorList.html 包含在 index.html 中（基于此问题：Include another HTML file in a HTML file），但是当我按下“上传”按钮时，我主页的结果部分仍然是空白的.也许重定向以某种方式把事情搞砸了？
app.py：
def upload():
if request.method == 'POST':
if request.form['affiliation'] == "letter":
affiliation = "let"
elif request.form['affiliation'] == "number":
affiliation = "num"
proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
time.sleep(0.5) #wait for html file to be created before going to the results page.
return redirect(url_for('upload'))
return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
index.html：
{% extends "layout.html" %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("authorList.html");
});
</script>
</head>
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-6">
<div style="text-align:left"><br><h1>Author List Script</h1></div>
</div>
<div class="col-sm-6">
<section id="intro" class="main">
<div class="row">
<div class="column">
<h6>Download the template file below and re-upload with your custom author information</h6><br>
<a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br><br>
<form action="" method=post enctype=multipart/form-data>
<div id="buttonDiv">
<p><input type=file name=file value="Choose File">
<p>Mark affiliations with:</p>
<input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number" checked>Number</label><br>
<input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
<br><br>
</div>
<input type=submit value=Upload></p>
</form>
</div>
<div id="includedContent" class="column">
<h4>Results</h4>
</div>
</div>
</section>
</div>
</div>
</div>
{% endblock %}
【问题讨论】：
标签： javascript jquery html flask flask-wtforms