Javascript 使用jquery动态更新selectfield选项后验证WTForm

我正在创建一个flask应用程序，并使用WTForms创建了一个表单。该表单有两个SelectFields下拉列表和一个submit按钮。我希望下拉列表是动态的-基本上，用户将从下拉列表A中选择一个选项，这将在后台触发数据库查询，返回下拉列表B的选项

我找到了一些很好的解决办法

最后，我使用链接stackoverflow问题的第二个答案来模拟我的解决方案。基本思想是jquery调用一个flask端点，该端点执行数据库查询并返回动态填充的下拉列表的新选项

提交表单后，我想做一些额外的处理，为此，我在索引端点中使用if form.validate_on_submit:包装额外的处理并验证表单。我找到的这个问题的答案中没有一个试图验证表单。问题是下拉列表B上的选项字段现在无效。我从一些默认值开始，这是验证器函数所期望的，然后使用jquery动态更新选项，而不更新选项。如解决方案中所述，数据库查询是在与我检查表单验证的索引端点不同的端点中处理的，因此它无法访问这些新选项来填充它们

更新选项后，在索引端点中更新表单选项的最佳方式是什么，以便表单在提交时有效

一些代码片段

jquery主要是从链接的stackoverflow答案复制而来的

 <script type="text/javascript">
      $(document).ready(function() {

        $('#dropdown_one').change(function(){

          $.getJSON('/_update_dropdown', {
            selected_class: $('#dropdown_one').val()

          }).done(function(data) {
                $('#dropdown_two').html(data.html_string_selected);
           })
        });
      });
    </script>

@bp_views.route('/_update_dropdown')
def update_dropdown():
    # the value of the first dropdown (selected by the user)
    selected_class = request.args.get('selected_class', type=str)
    
    # get values for the second dropdown
    updated_values = db.fetch_data(selected_class)

    # create the value sin the dropdown as a html string
    html_string_selected = ''
    for entry in updated_values:
        html_string_selected += '<option value="{}">{}</option>'.format(entry, entry)

    return jsonify(html_string_selected=html_string_selected)

python/flask索引端点

@bp_views.route('', methods=["POST", "GET"])
def index():        
    form = Form()

    form.dropdown_two.choices = [(None, "Choose item on dropdown one first")] # default value for the second dropdown
        
    if form.validate_on_submit():
        # further processing
        # this check fails because the choices have been updated from the default values and the choice isn't valid
    

    return render_template('index.html', form=form)

python/flask更新端点主要是从链接的stackoverflow应答中复制的

 <script type="text/javascript">
      $(document).ready(function() {

        $('#dropdown_one').change(function(){

          $.getJSON('/_update_dropdown', {
            selected_class: $('#dropdown_one').val()

          }).done(function(data) {
                $('#dropdown_two').html(data.html_string_selected);
           })
        });
      });
    </script>

@bp_views.route('/_update_dropdown')
def update_dropdown():
    # the value of the first dropdown (selected by the user)
    selected_class = request.args.get('selected_class', type=str)
    
    # get values for the second dropdown
    updated_values = db.fetch_data(selected_class)

    # create the value sin the dropdown as a html string
    html_string_selected = ''
    for entry in updated_values:
        html_string_selected += '<option value="{}">{}</option>'.format(entry, entry)

    return jsonify(html_string_selected=html_string_selected)

---

我也遇到了这个问题。我的解决方案是在提交时动态创建所选选项，使其有效

这是它如何工作的一个例子：

if request.method == 'POST':
    for k,v in form.data.items():
        if isinstance(form[k].widget, wtforms.widgets.Select):
            form[k].choices = [(form[k].data, form[k].data)]

    if form.validate_on_submit():

---

应该注意的是，在本例中，SelectFields绕过了验证。恶意参与者可以提交他们想要的任何值，并且在提交时生效，除非采取额外的服务器端步骤来限制可以创建的选项。

您已经解决了问题，您尝试了哪些代码？在提交时运行validate_之前，如何阻止您在索引端点中运行数据库查询并更新表单的选择？我想我已经非常清楚地解释了我到目前为止所做的工作。。。我不确定什么代码会有帮助，因为我几乎做了与我链接的答案相同的事情。我可以在我的索引端点上运行数据库查询，但每次加载页面时，我都会运行相同的查询两次，我希望避免添加的2链接不够，首先，因为你要求想回答的人看一整段视频或一整篇SO帖子，而不是简单地添加代码，把所有的精力留给回答的人。但是，最重要的是，我不认为你的代码是相同的。事实上，你是说你有一个“if feed\u type\u form.validate\u on\u submit:”但是在这两个解决方案中，他们没有使用它。所以请编辑你的问题，添加你的代码，并举例说明你希望从代码中得到什么结果。希望这能有所帮助