如何在同一頁面的特定部分顯示Flask表單結果
[英]How to display Flask form results on a specific part of the same page
問題描述
CONTEXT
我已經在主頁上創建了一個包含表單的燒瓶應用程序。 用戶打算下載並重新上傳已填寫的模板文件，然后填寫表單。 提交此表單時，會在后端上傳的文件上調用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 %}
UPDATE
我理解如何將主頁划分為列，但我仍然不明白如何指定我希望python生成的.html （稱為authorList.html ）文件顯示在Where I want the results to appear在index.html一部分index.html 。
以前，我已將其設置為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函數在index.html包含authorList.html （這里基於這個問題： 在HTML文件中包含另一個HTML文件 ），但是當我按下“上傳”按鈕時，我的主頁的結果部分是還是空白。 也許重定向在某種程度上搞亂了？
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 %}
1 個解決方案
解決方案1
0 2019-04-17 14:53:22
這不是燒瓶問題。 它可以很容易地使用像bootstraps和jquery這樣的css模塊來實現
通過行和col-sm的 Css類是你的工作。 col-sm的最大值為12 ，表示整頁寬度的大小。
如果你想要三列你可以放置你的結果和數據，你可以將col-sm分成三個，即col-sm-4，因為4 + 4 + 4會給你12
如果你想要兩列你可以放置你的結果和數據，就像你問的那樣，你可以將col-sm分成兩個，即col-sm-6，因為6 + 6會給你12
三欄實例
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Left</h3>
<div>Your content for left appears here</div>
</div>
<div class="col-sm-4">
<h3>middle</h3>
<div>Your content for Middle appears here</div>
</div>
<div class="col-sm-4">
<h3>Right</h3>
<div>Your content for right appears here</div>
</div>
</div>
</div>
</body>
</html>
2列示例
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Left</h3>
<div>Your content for left appears here</div>
</div>
<div class="col-sm-6">
<h3>Right</h3>
<div>Your content for right appears here</div>
</div>
</div>
</div>
</body>
</html>
要修復您的內容，請注意Div打開和關閉的位置
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Left for author script</h3>
<div style="text-align:left"><br><h1>Author List Script</h1></div>
</div>
<div class="col-sm-6">
<h3>Main Content at Right</h3>
<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>
</div>
</div>
</body>
</html>
您現在可以添加其他內容並使代碼與您的應用程序兼容
使用jQuery延遲表單輸入並在延遲后在同一頁面上顯示結果
[英]Delay Form Input With jQuery And Display Results On Same Page After Delay
無法使用 php 和 javascript 在同一頁面上顯示表單結果
[英]Can't display form results on same page with php and javascript
提交表單，使用腳本處理信息，並在同一頁面上顯示結果
[英]Submit form, process info with script, and display results on the same page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.