如何使用 ajax 调用（即 Select2）填充 WTForms SelectField？

我正在尝试使用 Flask + WTForms + Select2 （ajax 调用）实现一个网络应用程序，但不幸的是没有取得巨大成功。主要问题与我的 WTForms 类之一中的属性“choices”有关，因为我无法理解如何使用 ajax 调用填充选择菜单并让 WTForms 类管理这些数据。 这是我的解决方法：

class insertData(FlaskForm):
    ...
    feature_tag = SelectMultipleField(
        u'Features',
        choices=[(0, "")],
        coerce=int,
        render_kw={"multiple": "multiple"},
        id="feature_tag_sel2")
    ...

这在模板中调用：

<div class="col-sm-4">
    {{form.feature_tag}}
</div>

由 Select2 管理：

$("#feature_tag_sel2").select2({
    minimumInputLength: 2,
    ajax: {
      url: "/select/api/feature",
      dataType: 'json',
      data: function (params) {
          return { q: params.term };
      },
      processResults: function (data) {
          return {results: data};
      },
      cache: false
    }
});

最后，ajax 调用引用了这段代码：

@app.route('/select/api/feature')
def suggestion_feature():
    param = request.args.get('q', '')
    q = db.session.query(Feature).filter(Feature.nome_f.startswith(param)).all()
    value = [dict(id=i.id, text=i.nome_f) for i in q]
    return json.dumps(value)

当此代码运行时，无论 select 的值是什么，validate_on_submit出现错误：我可以从 Select2 菜单中选择多个值，但当然任何与 0 不同的值都不是有效的选择。然后我尝试通过实现新的字段定义来阻止此错误的传播：

class Select2MultipleField(SelectMultipleField):
    def pre_validate(self, form):
        # Prevent "not a valid choice" error
        pass

这段代码可以工作，但无论如何它都是一种解决方法。例如，当validate_on_submit在表单中发现另一个错误并重新加载页面，所有选定的值都会丢失。当我需要编辑数据时也会发生同样的情况。总而言之，这种解决方法让我失去了 WTForms 的许多优点。

因此问题是：是否有任何方法可以将 WTForms SelectField 与通过 ajax 调用检索的数据集成？

已编辑 2021 年 10 月 8 日

对于仍然对此事感兴趣的人，我找到了以下解决方案：烧瓶选择2 https://github.com/pjcunningham/Flask-Select2。它只需很少的修改就可以很好地集成到代码中。唯一的缺陷是它只能在 Select2 版本中开箱即用。 3（对于Select2当前版本的更新，有几个点需要重写）

根据我对您问题的理解，您的 ajax select2 和 WTForm 有两个问题。

• 提交表单时不是有效的选择
• 和所选值丢失以及表单重新加载或错误

让我尝试按如下方式解决它们：

提交表单时不是有效的选择

对于第一个问题不是有效的选择，您可以告诉 wtf 表单不要在提交表单时验证它，是的，您的解决方案！它对我也有用。

class Select2MultipleField(SelectMultipleField):
    def pre_validate(self, form):
        # Prevent "not a valid choice" error
        pass

所选值丢失并且表单重新加载或错误

引用自你的问题

当 validate_on_submit 在表单和页面中发现另一个错误时 重新加载后，所有选定的值都会丢失。当我时也会发生同样的情况 需要编辑数据。

是的，这确实按预期工作。首先，选择字段不包含任何选项，因为选择字段中的所有数据都是从远程 ajax 调用获取的，这意味着当您使用 WTForm 调用创建时，选择字段没有提供任何数据选择代码在这里

class insertData(FlaskForm):
    ...
    feature_tag = SelectMultipleField(
        u'Features',
        choices=[(0, "")],
        coerce=int,
        render_kw={"multiple": "multiple"},
        id="feature_tag_sel2")
    ...

事实上，你不必提供论据choices因为您的数据是从远程 ajax 调用调用的，并且您已经解决了问题Not a valid choice已经。

要回答您的问题并解决第二个问题，您可以检查数据值是否附加在您的选择字段中，如下所示，并将其创建为您选择字段的选项，如下所示：

<div class="col-sm-4">
    {{form.feature_tag}}
</div>

<script>
$(document).ready(function(){
$("#feature_tag_sel2").select2({
    minimumInputLength: 2,
    ajax: {
      url: "/select/api/feature",
      dataType: 'json',
      data: function (params) {
          return { q: params.term };
      },
      processResults: function (data) {
          return {results: data};
      },
      cache: false
    }
});

{# check if select field come with data previously selected #}
{% if form.feature_tag.data %}
{# trigger an ajax call to url with parameter of this value #}

        $.ajax("/select/api/feature?q={{form.feature_tag.data}}", {
                dataType: "json"
        }).done(
                function(data) { 
                    text = data.items[0].text // text returned from your url
                    id = data.items[0].id. // id returned from your url
                    
                    // created an option for the select field
                    var newOption = new Option(text, id, false, false)

                    $('#{{form.feature_tag.id}}').append(newOption).trigger('change')

                    $('#{{form.feature_tag.id}}').val(id).trigger('change')
    
                }
        );

{% endif %}


});

</script>

这样，您的选择字段在您查看或编辑它之前应该已经包含您之前选择的值:)

希望这有帮助！谢谢