如何从 Materialise Chips 获取数据或选定的标签到 Flask

Question

我一直在尝试在 Materialise CSS 的 Chips 字段中选择标签，但没有成功，有人可以帮助我吗？

完整 HTML 模板：

<form action="{{ url_for('add') }}" method="POST">
    {{ form.csrf_token }}
       
    <span>{{ form.pecas.label }}</span>
    <div class="chips" >    
    </div>
                                   
    <input type="submit" class="btn btn-success" value="Save">
</form>
            
<script>
    $(document).ready(function() {
    $('.chips').chips(); 
        
    $('.chips-placeholder').chips({
     placeholder: 'Código da peça',
     secondaryPlaceholder: '+ Peça',
     class: 'pecas',
     name: 'pecas',
     });
     var chipInstance = M.Chips.getInstance($(".chips"));
     var pecas = chipInstance.chipsData
     console.log(pecas)  
     });
</script>
         
<script>
     $(document).ready(function(){
     $('select').formSelect();
     });
</script>  

Flask路线：

@app.route("/add", methods=['POST', 'GET'])
def add():   
            
    form = AddDispositivoForm(request.form)
    if request.method == 'POST':                
        pecas = request.form.getlist("pecas")
        print(pecas)   
                
        return redirect(url_for('index'))
    return render_template("add.html", form=form)

我尝试的一切都返回一个空列表[]

Answer 1

您可以使用如下所示的隐藏字段来携带芯片数据：

<input type="hidden" name="pecas" id="pecasInput">

然后你应该定义一个js函数来提取标签并使用标签的JSON字符串填充隐藏字段。

function updateHiddenInput() {
    var chipInstance = M.Chips.getInstance($('.chips'));
    $('#pecasInput').val(JSON.stringify(chipInstance.chipsData));
}

在此之后，确保此函数在提交表单时运行，一种方法是使用另一个函数，例如：

$('#yourFormID').on('submit', function(e) {
    updateHiddenInput();
});

然后在后端你可以通过以下方式获取值：

if request.method == 'POST':                
    pecas_json = request.form.get("pecas", "[]")
    pecas = json.loads(pecas_json)

pecas 将有一个字典列表，其中标签作为键。