【发布时间】：2019-08-30 20:01:01
【问题描述】：
我想要做什么
我有一个带有部分动态功能的静态功能，您可以在其中添加更多 <input> 字段以在单击按钮时添加标签。
问题
我的表单正在为所有静态表单字段和<input> 字段使用 WTForms 模板，使用 jQuery 生成，基于此 great answer from nsfyn55，以添加更多标签。
前端工作得很好，但我被困在 python 中的验证上，validate_on_submit() 一直因为未知原因而失败。
我怀疑这与模板的混合使用和 jQuery 生成的<input> 字段有关，不知何故破坏了我的验证。
另一个原因可能是我，不理解how to use AJAX with flask properly 并且以某种方式错误处理了 AJAX POST。
MVCE:
app.py
@app.route(BASEURL + '/new', methods=['GET', 'POST'])
def new():
form = Form()
global metadata
data = dict()
if form.validate_on_submit():
keyword1 = request.form['keyword-1']
keyword2 = request.form['keyword-2']
keyword3 = request.form['keyword-3']
keywords = []
if keyword1: keywords.append(keyword1)
if keyword2: keywords.append(keyword2)
if keyword3: keywords.append(keyword3)
data.update({
'given_name': form.abstract.data,
'family_name': form.description.data,
'keywords': keywords,
})
filename = 'data.json'
with open('data/' + filename, 'w') as file:
file.write(json.dumps(metadata, indent=4, sort_keys=False))
class Form(FlaskForm):
given_name = StringField()
family_name = StringField()
new.html
<html>
<head>
<title>New</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/form.js') }}"></script>
</head>
<body>
<form method='POST' action='{{ url_for('new') }}'>
{{ form.csrf_token }}
{% from "_formhelpers.html" import render_field %}
<dl>
{{ render_field(form.given_name) }}
{{ render_field(form.family_name) }}
<div id="keywordsTest"></div>
<button onclick="keywordField()">+</button>
</dl>
<input type="submit" value="Submit">
</form>
<script>
var index = 0;
function keywordField(){
if(index<3){
index+=1;
$('<input>').attr({
type: 'text',
id: 'keyword-' + index ,
name: 'keyword-' + index,
placeholder: 'keyword' + index
}).appendTo('#keywordsTest');
}
return false
}
$(keywordField)
</script>
</body>
</html>
form.js
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data : {
keyword1 : $('#keyword-1').val(),
keyword2 : $('#keyword-2').val(),
keyword3 : $('#keyword-3').val()
},
type : 'POST',
url : '/register/new'
});
event.preventDefault();
});
});
【问题讨论】：
-
"keyword1" != "keyword-1"。您在 AJAX 中为参数指定的名称与服务器期望的名称不匹配。 （在这种情况下，您最初在 HTML 中命名的字段是无关紧要的，重要的是您在 AJAX 中定义的结构。请改用
data : { "keyword-1" : $('#keyword-1').val(), "keyword-2" : $('#keyword-2').val(), "keyword-3" : $('#keyword-3').val() },
标签： jquery ajax flask flask-wtforms