dav*_*ing 10 javascript python jinja2 flask wtforms
我有一个flask + wtforms应用程序，我希望用户能够输入父对象和任意数量的子对象。我不确定从用户界面动态创建新的子表单输入字段的最佳方法是什么。
以下是一个完整的工作示例。（注意：这是一个人工示例，用于突出显示单个.py文件中的所有工作部件，这使代码有些混乱。很抱歉。）
from flask import Flask, render_template_string
from flask_wtf import FlaskForm
from wtforms import FieldList, FormField, StringField, SubmitField
from wtforms.validators import InputRequired
# Here I'm defining a parent form, AuthorForm, and a child form, BookForm.
# I'm using the FieldList and FormField features of WTForms to allow for multiple
# nested child forms (BookForms) to be attached to the parent (AuthorForm).
class BookForm(FlaskForm):
title = StringField('title', validators=[InputRequired()])
genre = StringField('genre', validators=[InputRequired()])
# I'm defining a min_entry of 1 so that new forms contain a blank BookForm entry
class AuthorForm(FlaskForm):
name = StringField('name', validators=[InputRequired()])
books = FieldList(FormField(BookForm), min_entries=1)
submit = SubmitField('Save')
# Here's my Jinja template
html_template_string = """
<html>
<head><title>stackoverflow example</title></head>
<body>
<form action="" method="post" role="form">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name() }}
{% for book in form.books %}
<p>
{{ book.title.label }} {{ book.title() }}
{{ book.genre.label }} {{ book.genre() }}
{{ book.hidden_tag() }}
</p>
{% endfor %}
{{ form.submit() }}
</form>
</body>
</html>
"""
# Alright, let's start the app and try out the forms
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
@app.route('/', methods=['GET', 'POST'])
def index():
form = AuthorForm()
if form.validate_on_submit():
for book in form.books.data:
print(book)
return render_template_string(html_template_string, form=form)
if __name__ == '__main__':
app.run()
我知道如何在服务器端创建新的子项（BookForm项）。我可以将空字典传递给表单，而WTForms会为我生成输入：
...
form = AuthorForm()
form.books.append_child({})
form.books.append_child({})
form.books.append_child({})
...
Bam，现在我的页面上有三本书的输入字段，我可以预先填充它们的数据。WTForms在呈现页面之前生成表单输入内容。它计算出每个输入等所需的所有ID。
如果我希望用户能够单击按钮并在呈现页面后从用户端添加BookForm输入的新实例，该如何处理？我是否必须使用WTForms生成的内容作为参考，自己在JavaScript中手动构造输入字段？这看起来很杂乱，容易破损，或者至少是丑陋的代码。
WTForms是否可以根据需要呈现新输入的HTML，管理输入标签ID的唯一性等方法？我可以将某些内容回发到服务器，以将空白条目添加到表单中并重新呈现页面，但这会使我失去所有现有的用户输入，因此它实际上不起作用。这个 Stackoverflow问题在注释中暗示了相同的观点，并且提出了相同的反对意见。
如果必须以丑陋的手动方式完成此操作，那么我可以进行管理。当有更好的（甚至可能是官方的）解决方案时，我只是不想采取糟糕的方法。
小智 6
我完全理解您的问题，使用纯Flask来实现这一目标。但是几个月前，我处在同样的境地。经过大量的研究和奇怪而多余的方法，我发现，实现它不仅是艰苦的，而且是漫长而艰巨的，任何小的更改或调试工作都会破坏整个事情。
我知道这不是您所要的。但是，如果您希望通过Flask + jQuery做到这一点。我将向您展示一些我通过视图从HTML前端动态加载数据的工作，如果您改变主意并决定合并一些jQuery，希望对您有所帮助。
这是我的表单，使用HTML和Jinja2：
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">XYZ</legend>
<div>
{{ form.standard.label(class="form-control-label") }}
{{ form.standard(class="form-control form-control-lg") }}
</div>
<div>
{{ form.wps.label(class="form-control-label") }}
{{ form.wps(class="form-control form-control-lg") }}
</div>
...
</fieldset>
<div class="form-group">
{{ form.submit(class='btn btn-outline-success') }}
</div>
</form>
这是这种形式的视图：
@app.route("/newqualification/<welder_id>", methods=['GET', 'POST'])
def newqualification(welder_id=None):
form = #passformhere
#writemethod.
return render_template('xyz.html', title='xyz', form=form)
这是我编写的几乎没有帮助的jQuery脚本，您可以通过<script>标记将其包含在HTML中。
<script>
$(document).ready(function(){
$("#standard").change(function(){
var std = $(this).find('option:selected').val(); //capture value from form.
$.getJSON("{{url_for('modifywps')}}",{'std':std}, function(result){ //use captured value to sent to view via a dictionary {'key':val}, via url_for('view_name')
$.each(result, function(i, field){ //value you want will be back here and gone through..
$.each(field, function(j,k){
$("#wps").append('<option value="'+j+'">'+k+'</option>'); // use jQuery to insert it back into the form, via the form name you gave in jinja templating
});
});
});
});
$("#wps").change(function(){
var std = $('#wps').find('option:selected').val(); // capture value from form.
$.getJSON("{{url_for('modifyprocess')}}",{'std':std}, function(result)
$.each(result, function(i, field){
$.each(field, function(j,k){
$("#processes").append('<option value="'+j+'">'+k+'</option>');
});
});
});
});
</script>
使用jQuery及其getJSON()方法，我能够向该视图发送请求：
@app.route("/modifywps", methods=['POST', 'GET'])
def modifywps():
application_standard_id = request.args.get('std') # gets value from the getJson()
# process it however you want..
return #whatever you want.
因此，每次发生更改时，都会从站点动态读取数据，将其发送到Flask视图，然后在其中进行任何处理，然后将其发送回去，getJSON()然后直接插入表单中！瞧，您已经动态地使用jQuery + Flask，并使用了您最好的新朋友JSON来进行您想做的事情。
经过大量研究，我发现最简单的方法是通过jQuery完成您想要的操作。学习getJSON()和post()jQuery的方法，它纳入你的HTML，你有你的答案。而且jsonify()我相信您也可以通过导入Python import json。
用与发送数据jsonify()相同的方式输入一个列表，您可以使用该列表作为视图返回getJSON()。
很抱歉再次提出这个问题，但我想指出的是，无需使用 javascript 也可以实现类似的策略。这个想法是在提交时预处理表单数据，然后使用处理后的数据重新加载表单（使用 wtforms 的内置功能从其数据重新创建表单）。
一种方法如下。向表单添加一个额外的输入字段并定义一个update_self方法：
class AuthorForm(FlaskForm):
name = StringField('name', validators=[InputRequired()])
books = FieldList(FormField(BookForm), min_entries=1)
submit = SubmitField('Save')
addline = SubmitField('Add new line') # This is the new input
def update_self(self):
# read the data in the form
read_form_data = self.data
# modify the data as you see fit:
updated_list = read_form_data['books']
if read_form_data['addline']:
updated_list.append({})
read_form_data['books'] = updated_list
# reload the form from the modified data
self.__init__(formdata=None, **read_form_data)
self.validate() # the errors on validation are cancelled in the line above
注意：formdata=None需要防止FlaskForm自动读取表单中的数据。如果省略它，表单将formdata在运行该.__init__方法时接收，从而忽略新处理的数据。
在模板中，显示新输入：
{{ form.addline() }}
在定义路由中，update_self在提交时首先调用该方法：
@app.route('/', methods=['GET', 'POST'])
def index():
form = AuthorForm()
if form.validate_on_submit():
form.update_self() # This reloads the form with the processed data
for book in form.books.data:
print(book)
return render_template_string(html_template_string, form=form)
我希望这有帮助！
| 归档时间： |
|
| 查看次数： |
1159 次 |
| 最近记录： |