如何使用 Flask 获取动态字段？答案

【问题标题】：How to get dynamic fields with Flask?如何使用 Flask 获取动态字段？
【发布时间】：2019-06-06 19:32:57
【问题描述】：

我正在尝试构建一个可以动态获取更多字段的网络应用

该应用程序用于获取汉堡店订单，因此会有 1 个汉堡或 7 个汉堡的订单，我尝试了一些我发现的代码，但我无法处理订单数据并将它们保存到日期基地

{% extends "layout.html" %}

{% block title %}
    Comander {% endblock %}

{% block main %} <form class="/comander" method="post">

<head>   <meta charset="utf-6">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head>

<!--Hasta arriva del panel--> <div class="container">   <div class="panel panel-default">
    <div class="panel-heading">Burgers</div>
    <div class="panel-body">

        <div class="input-group control-group after-add-more">


<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule">
        <option value="" disabled selected>Formule</option>
        <option value="1">Classique</option>
        <option value="2">Big</option>
        <option value="3">Veggie</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="fromage" name="fromage">
        <option value="" disabled selected>Fromage</option>
        <option value="1">Chedar</option>
        <option value="2">Tomme</option>
        <option value="3">Blue</option>
        <option value="4">Chevre</option>
        <option value="5">Cantal</option>
        <option value="6">Reblochon</option>
        <option value="7">Maroille</option>
        <option value="8">Sans Fromage</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson">
        <option value="" disabled selected>Cuisson</option>
        <option value="1">Blue</option>
        <option value="2">Seignan</option>
        <option value="3">A poit</option>
        <option value="4">Bien Cuit</option>
      </select>
    </div>   </div> </div>


<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c">   <label class="form-check-label" for="defaultCheck1">Extra Chedar</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b">   <label class="form-check-label" for="defaultCheck1">Extra Bacon</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a">   <label class="form-check-label" for="defaultCheck1">Extra Autre</label> </div>

    </div>   </div> </div>


<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o">   <label class="form-check-label" for="defaultCheck1">S/Oni</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal">   <label class="form-check-label" for="defaultCheck1">S/Sal</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c">   <label class="form-check-label" for="defaultCheck1">S/Cor</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau">   <label class="form-check-label" for="defaultCheck1">S/Sau</label> </div>

    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">   <div class="input-group">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>   </div> </div>


</div>



<!-- Copy Fields --> <div class="copy hide"> <hr>

    <div class="control-group input-group">

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule">
        <option value="" disabled selected>Formule</option>
        <option value="1">Classique</option>
        <option value="2">Big</option>
        <option value="3">Veggie</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary"id="fromage" name="fromage">
        <option value="" disabled selected>Fromage</option>
        <option value="1">Chedar</option>
        <option value="2">Tomme</option>
        <option value="3">Blue</option>
        <option value="4">Chevre</option>
        <option value="5">Cantal</option>
        <option value="6">Reblochon</option>
        <option value="7">Maroille</option>
        <option value="8">Sans Fromage</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson">
        <option value="" disabled selected>Cuisson</option>
        <option value="1">Blue</option>
        <option value="2">Seignan</option>
        <option value="3">A poit</option>
        <option value="4">Bien Cuit</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c">   <label class="form-check-label" for="defaultCheck1">Extra Chedar</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b">   <label class="form-check-label" for="defaultCheck1">Extra Bacon</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a">   <label class="form-check-label" for="defaultCheck1">Extra Autre</label> </div>

    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o">   <label class="form-check-label" for="defaultCheck1">S/Oni</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal">   <label class="form-check-label" for="defaultCheck1">S/Sal</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c">   <label class="form-check-label" for="defaultCheck1">S/Cor</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau">   <label class="form-check-label" for="defaultCheck1">S/Sau</label> </div>

    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">   <div class="input-group">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>   </div> </div>

      </div>

</div>

  </div> </div>

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

      $(".add-more").click(function(){
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){
          $(this).parents(".control-group").remove();
      });

    }); </script>

      <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i>Ajouter</button>
            <button class="btn btn-primary" type="submit"> Confirmer</button>
      </div>

</form> {% endblock %}

让用户设置任意数量的汉堡的最佳方式是什么？我读了一些关于 Flask-WTF 的文章，但我不确定这是否有助于解决这个特定问题，而且我已经没有时间进入死胡同了。

感谢您的回答 Stack Overflow 社区。p>

【问题讨论】：

标签： jquery html python-3.x flask dynamic

【解决方案1】：

我无法运行您共享的模板，因为它需要 layout.html 和必要的库。

这是一个使用 jQuery 创建动态文本字段并在 Flask 应用程序中获取值的示例。

让我们创建一个可以动态添加产品的表单。稍后，表单提交后显示动态表单值。

目录结构

├───app.py
├───templates
│   ├───form.html

文件内容

app.py:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)    

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        return jsonify(request.form)
    return render_template("form.html")

form.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Dynamic Form Example</title>
        <script
                src="https://code.jquery.com/jquery-1.12.4.min.js"
                integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
                crossorigin="anonymous"></script>
    </head>
    <body>
        Products:
        <form action="/" method="post">
            <div id="products"></div>
            <button id="add_item" type="button">Add item</button>
            <input type="submit" value="Submit">
        </form>
        <script>
            $(document).ready(function(){
                var count_item = 0;
                $("#add_item").on("click", function(){
                    count_item += 1;
                    $("<input/>").attr({ type: "text", placeholder: "Enter product name",
                        name: "item_"+count_item}).appendTo("#products").wrap($("<div/>"));
                });
            })
        </script>
    </body>
</html>

输出

使用 jQuery 生成动态表单元素：

显示提交的值：

已安装的包

Click==7.0
Flask==1.0.3
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
Werkzeug==0.15.4

运行应用程序

set FLASK_APP=app.py
set FLASK_ENV=development
flask run

如果您使用的不是 Windows 操作系统，请将 set 替换为 export。

【讨论】：

非常感谢 Arsho，这正是我想做的，我会以你的代码作为参考继续我的编码，干杯人！
一个问题，如果我想要一个选择元素而不是输入元素应该怎么做 $("").attr({ type: "text", placeholder: "输入产品名称"，名称："item_"+count_item}).appendTo("#products").wrap($("
"));
您想在选择元素中添加选项吗？还是带有预定义选项的新 Select 元素？
是的，我想在选择元素中添加选项，就像我的 html 文档一样，我试过了，但我不得不说我是JS的新手，真的谢谢你的帮助
是的，你这边简单明了，就是我想怎么保留它，因为我不知道我的项目是否会被接受，谢谢我稍后会看一下链接欢呼