用Flask和HTML编写一个简单程序，从网页一个框架获取输入并返回到另一个框架
这是一个简单的网页，顶部有一个输入表单。当用户提交信息后，这些输入会被一个Python程序处理，然后结果会显示给用户。现在，结果应该在网页的底部显示，但目前却显示在了提交表单的同一个区域。我希望顶部的区域能一直显示提交表单，而结果则显示在底部区域。
索引表单的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB Query Page</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.frame-container {
display: flex;
flex-direction: column;
height: 100%;
}
.top-frame {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.bottom-frame {
display: flex;
flex: 1;
}
.bottom-left-frame {
width: 200px;
background-color: #d3d3d3;
}
.bottom-right-frame {
flex: 1;
display: flex;
flex-direction: column;
}
.bottom-top-frame {
flex: 20%;
background-color: #bdbdbd;
}
.bottom-bottom-frame {
flex: 80%;
background-color: #a8a8a8;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="frame-container">
<div class="top-frame">
<h1> </h1>
</div>
<div class="bottom-frame">
<div class="bottom-left-frame">
<iframe src="test_left.html"></iframe>
</div>
<div class="bottom-right-frame">
<div class="bottom-top-frame">
<iframe src="animal_top.html" name="bottomTopFrame"></iframe>
</div>
<div class="bottom-bottom-frame">
<iframe name="outputFrame" src="test_bottom.html"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
提交表单的HTML代码
type here<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
h2 {
margin-bottom: 15px;
}
.input-container {
display: flex;
justify-content: space-between;
padding-left: 80px;
padding-right: 80px;
margin-bottom: 20px;
}
input {
width: calc(20% - 10px); /* 20% width for each input box with 10px spacing */
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>Sample test page</h2>
<br>
<br>
<form class="input-container" id="myForm" action="{{ url_for('submit_form') }}" method="post">
<input type="text" id="name" name="name" placeholder="John">
<select id="animal" name="animal" placeholder="dogs">
<option value="dogs">dogs</option>
<option value="cats">cats</option>
<option value="birds">birds</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
左侧面板的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exchange Links</title>
<style>
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
li {
border-left: 4px solid #007bff; /* Adding left border */
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
li:last-child {
border-bottom: none; /* Remove border from the last item */
}
li a {
text-decoration: none;
color: #333;
padding-left: 10px; /* Adding padding to align text after the border */
}
li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="animal_top.html" target="bottomTopFrame">Animals</a></li>
<li><a href="places_top.html">Places</a></li>
</body>
</html>
底部框架的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
</head>
<body>
<div class="container">
<h2>Form Submission Result</h2>
<div id="outputFrame" class="output-frame"></div>
</div>
<script>
// Get the result from the query parameter in the URL
var result = new URLSearchParams(window.location.search).get('result');
// Display the result in the output frame
document.getElementById('outputFrame').innerHTML = result;
</script>
</body>
</html>
Flask应用的代码
from flask import Flask, render_template, request, redirect, url_for
import subprocess
app = Flask(__name__)
@app.route("/")
def home():
return render_template("test_index.html")
@app.route("/test_left.html")
def left():
return render_template("test_left.html")
@app.route("/test_top.html")
def top():
return render_template("top.html")
@app.route("/test_bottom.html")
def bottom():
return render_template("test_bottom.html")
@app.route("/animal_top.html")
def momentum_top():
return render_template("animal_top.html")
@app.route('/submit_form', methods=['POST'])
def submit_form():
name = request.form['name']
animal = request.form['animal']
# Call the Python script with the form data as arguments
result = subprocess.run(['python3', 'query_test.py', name, animal], capture_output=True, text=True)
# Get the output of the Python script
output = result.stdout
return redirect(url_for('output_page', result=output))
@app.route('/output')
def output_page():
result = request.args.get('output')
return render_template('test_bottom.html', result=result)
if __name__ == "__main__":
app.run(debug=True)
后端处理的Python应用代码
import sys
# Get command line arguments
name = sys.argv[1]
animal = sys.argv[2]
# Process the data
# For demonstration purposes, simply print the received data
print(name, "loves", animal )
目前结果显示在顶部框架，但我需要它显示在底部框架。
2 个回答
0
把模板文件 animal_top.html 渲染出来，而不是 test_bottom.html。当 animal_top.html 重新加载时，JavaScript 会找到 iframe 来显示结果。
animal_top.html
//add this
<script>
// Get the result from the query parameter in the URL
var result = new URLSearchParams(window.location.search).get('result');
// Display the result in the output frame
var iframe=window.top.frames.document.getElementById("outputFrame");
var innerDoc = iframe.contentDocument;
if (iframe && result) innerDoc.getElementById("outputFrame").innerHTML = result;
</script>
</body>
</html>
test_bottom.html --> 去掉 <script>....</script>
flaskapp.py
@app.route('/output')
def output_page():
return render_template('animal_top.html')
0
这个问题是通过在表单中使用目标属性来解决的。
<form class="input-container" id="myForm" action="{{ url_for('submit_form') }}" method="post" target="outputFrame">