Flask - 动态添加用户输入字段以调用函数
Flask - add user input fields dynamically to call function
我想在我的程序中实现特定的功能,但是我不知道从哪里开始。我目前正在使用烧瓶将两个数字加在一起。我有一个 html 文件来获取 2 个输入。 Input num 函数获取 2 个数字并将它们传递给另一个函数,然后将它们相加并保存到一个日志文件中,该文件随后将显示在另一个 HTML 页面上。我知道有一种更简单的方法可以做到这一点,但我正在以这种方式构建程序的功能,因为它稍后将用于更大更复杂的程序。为了简单起见,我使用了这个例子。
main.py
import sys
from flask import request, render_template, Flask, session, redirect, url_for
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hjshjhdjah kjshkjdhjs'
@app.route('/', methods=['GET', 'POST'])
def inputNum():
if request.method == 'POST':
num1 = request.form.get('num1')
session["num1"] = num1
num2 = request.form.get('num2')
session["num2"] = num2
return redirect(url_for("results"))
return render_template("inputNum.html")
@app.route('/results')
def results():
if "num1" and "num2" in session:
num1 = session["num1"]
num2 = session["num2"]
old_stdout = sys.stdout
log_file = open("message.log", "w")
sys.stdout = log_file
addNum(num1, num2)
sys.stdout = old_stdout
log_file.close()
with open("message.log", "r") as f:
content = f.read()
return app.response_class(content, mimetype='text/plain')
else:
return redirect(url_for('inputNum'))
def addNum(num1, num2):
num1 = int(num1)
num2 = int(num2)
sum = num1 + num2
print(sum)
if __name__ == '__main__':
app.run(debug=True)
results.html
<!DOCTYPE html>
<title xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="refresh" content="10">
<title>Results</title>
</head>
<body>
<h1>Log file ...</h1>
<script>
// function for adjusting iframe height to log size
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
<iframe src="{{ url_for('results') }}" frameborder="0" style="overflow:hidden;width:100%" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
</body>
</html>
inputNum.hmtl
<form action="{{ url_for("inputNum")}}" method="post">
<label for="num1">um1:</label>
<input type="number" id="num1" name="num1" placeholder="num1">
<label for="num2">num2:</label>
<input type="number" id="num2" name="num2" placeholder="num2">
<button type="submit">ADD</button>
我需要的是 inputNum.html 页面上的一个按钮,该按钮将创建另一组输入框,这些输入框将使用该功能并在结果页面中显示结果。
例如能够在同一页面上添加多组号码。
我不知道从哪里开始,所以非常感谢您的帮助。
已编辑:
你可以这样做:
HTML
<button id="btn"> Add new fields </button>
<form action="{{ url_for("inputNum")}}" method="post">
<div id="ip_div">
</div>
<button type="submit">Submit for addition</button>
</form>
JS
var num = 2; // adds 2 fields at a time
var createInputs = function () {
$("#ip_div").append('<form id="form"></form>');
for (var i = 0; i < num; i++) {
$("#form").append("<input></input>");
}
};
$("#btn").click(function () {
createInputs();
//create unique ID for each input
$("#form")
.find("input")
.each(function (i) {
$(this).attr("id", "num" + i);
$(this).attr("placeholder", "num" + i);
});
});
我想在我的程序中实现特定的功能,但是我不知道从哪里开始。我目前正在使用烧瓶将两个数字加在一起。我有一个 html 文件来获取 2 个输入。 Input num 函数获取 2 个数字并将它们传递给另一个函数,然后将它们相加并保存到一个日志文件中,该文件随后将显示在另一个 HTML 页面上。我知道有一种更简单的方法可以做到这一点,但我正在以这种方式构建程序的功能,因为它稍后将用于更大更复杂的程序。为了简单起见,我使用了这个例子。
main.py
import sys
from flask import request, render_template, Flask, session, redirect, url_for
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hjshjhdjah kjshkjdhjs'
@app.route('/', methods=['GET', 'POST'])
def inputNum():
if request.method == 'POST':
num1 = request.form.get('num1')
session["num1"] = num1
num2 = request.form.get('num2')
session["num2"] = num2
return redirect(url_for("results"))
return render_template("inputNum.html")
@app.route('/results')
def results():
if "num1" and "num2" in session:
num1 = session["num1"]
num2 = session["num2"]
old_stdout = sys.stdout
log_file = open("message.log", "w")
sys.stdout = log_file
addNum(num1, num2)
sys.stdout = old_stdout
log_file.close()
with open("message.log", "r") as f:
content = f.read()
return app.response_class(content, mimetype='text/plain')
else:
return redirect(url_for('inputNum'))
def addNum(num1, num2):
num1 = int(num1)
num2 = int(num2)
sum = num1 + num2
print(sum)
if __name__ == '__main__':
app.run(debug=True)
results.html
<!DOCTYPE html>
<title xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="refresh" content="10">
<title>Results</title>
</head>
<body>
<h1>Log file ...</h1>
<script>
// function for adjusting iframe height to log size
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
<iframe src="{{ url_for('results') }}" frameborder="0" style="overflow:hidden;width:100%" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
</body>
</html>
inputNum.hmtl
<form action="{{ url_for("inputNum")}}" method="post">
<label for="num1">um1:</label>
<input type="number" id="num1" name="num1" placeholder="num1">
<label for="num2">num2:</label>
<input type="number" id="num2" name="num2" placeholder="num2">
<button type="submit">ADD</button>
我需要的是 inputNum.html 页面上的一个按钮,该按钮将创建另一组输入框,这些输入框将使用该功能并在结果页面中显示结果。
例如能够在同一页面上添加多组号码。
我不知道从哪里开始,所以非常感谢您的帮助。
已编辑:
你可以这样做:
HTML
<button id="btn"> Add new fields </button>
<form action="{{ url_for("inputNum")}}" method="post">
<div id="ip_div">
</div>
<button type="submit">Submit for addition</button>
</form>
JS
var num = 2; // adds 2 fields at a time
var createInputs = function () {
$("#ip_div").append('<form id="form"></form>');
for (var i = 0; i < num; i++) {
$("#form").append("<input></input>");
}
};
$("#btn").click(function () {
createInputs();
//create unique ID for each input
$("#form")
.find("input")
.each(function (i) {
$(this).attr("id", "num" + i);
$(this).attr("placeholder", "num" + i);
});
});