Flask 应用程序 - 如何使用 JavaScript 处理 x 多行表单

Question

我正在尝试创建一个页面，用户可以选择用不同的值填充 1、2、3 或 x 行信息并将它们发送到 SQLAlchemy DB，但我不知道如何处理数据：

页面如下所示：()

用户可以选择通过按 + 添加行或通过按 X 删除特定行。

但是我不知道如何接收和保存数据。

page.html的代码：

{% block Scripts %}
<script type="text/javascript">
  function deleteme(target) {
    var toDel = target.parentNode;
    toDel.parentNode.removeChild(toDel);
  }
  function addme() {
    var node1 = document.createElement("div");
    node1.className = "NewListTrack";

    var node00 = document.createElement("div");
    node00.className = "buttonBox";
    node00.onclick = function () {
      deleteme(node00);
    };
    var textNode = document.createTextNode("X");
    node00.appendChild(textNode);

    var node01 = document.createElement("input");
    node01.type = "test";
    node01.placeholder = "Title";
    node01.name = "title";
    node01.id = "title";

    var node02 = document.createElement("input");
    node02.style = "height: 100%; width: 55px; padding-left: 5px;";
    node02.type = "minutes";
    node02.placeholder = "Minutes";
    node02.name = "minutes";
    node02.id = "minutes";

    var node03 = document.createElement("input");
    node03.style = "height: 100%; width: 55px; padding-left: 5px;";
    node03.type = "Seconds";
    node03.placeholder = "Seconds";
    node03.name = "Seconds";
    node03.id = "Seconds";

    var node4 = document.createElement("div");
    node4.style = "height: 34.09";
    textNode = document.createTextNode(":");

    var node04 = document.createElement("input");
    node04.type = "genre";
    node04.placeholder = "Genre";
    node04.name = "genre";
    node04.id = "genre";

    var node05 = document.createElement("input");
    node05.type = "info";
    node05.placeholder = "Other informations";
    node05.name = "info";
    node05.id = "info";

    node1.appendChild(node00);
    node1.appendChild(node01);
    node4.appendChild(node02);
    node4.appendChild(textNode);
    node4.appendChild(node03);
    node1.appendChild(node4);
    node1.appendChild(node04);
    node1.appendChild(node05);

    var node0 = document.getElementById("NewListMainInputs");
    node0.appendChild(node1);
  }
</script>
{% endblock %} {% block body %}

<form
  class="UploadForm"
  action="/upload"
  method="POST"
  enctype="multipart/form-data"
>
  <div class="NewListMainInputs">
    <div class="UploadBox">
      <label class="projectTitle">Name of the artist</label>
      <input type="text" class="UploadInputTitle" name="artist" />
    </div>
    <div class="UploadBox">
      <label class="projectTitle">Name of the album</label>
      <input type="text" class="UploadInputTitle" name="album" />
    </div>
    <div class="UploadBox">
      <label class="projectTitle">Select the album cover:</label>
      <input
        oninput="filesize(this);"
        type="file"
        class="UploadItemLine"
        name="image"
        id="image"
      />
    </div>
  </div>
  <div class="NewListMainInputs" id="NewListMainInputs">
    <div class="UploadBox">
      <label class="projectTitle">Add tracks:</label>
    </div>
    <div class="NewListTrack">
      <div>
        <div class="buttonBox" style="font-size: 32px;" onclick="addme();">
          +
        </div>
      </div>
      <input type="text" placeholder="Title" name="title" id="title" />
      <div>
        <input
          style="height: 100%; width: 55px; padding-left: 5px;"
          type="text"
          placeholder="minutes"
          name="minutes"
          id="minutes"
        />:<input
          style="height: 100%; width: 55px; padding-left: 5px;"
          type="text"
          placeholder="seconds"
          name="seconds"
          id="seconds"
        />
      </div>
      <input type="text" placeholder="Genre" name="genre" id="genre" />
      <input
        type="text"
        placeholder="Other Informations"
        name="infos"
        id="infos"
      />
    </div>
  </div>
  <center>
    <div class="buttonBox" style="font-size: 32px;" onclick="addme();">+</div>
    <button class="UploadButton" type="submit">
      Submit list
    </button>
  </center>
</form>
{% endblock %}

Answer 1

我不知道 request.form 是我要找的东西

req = request.form 发送一个元组列表

这是我在测试表单后收到的示例：

([('artist', 'ArtistTest'), ('album', 'albeum2'), ('title', 'Titre1'), ('title', 'Titre2'), ('title', 'Titre3'), ('minutes', '01'), ('minutes', '02'), ('minutes', '03'), ('seconds', '1234'), ('genre', 'Genre01'), ('genre', 'Genre02'), ('genre', 'Genre03'), ('infos', 'Other1'), ('seconds', '234'), ('seconds', '345'), ('infos', 'Other2'), ('infos', 'Other3')])

在 app.py 中

@app.route('/page', methods=["POST", "GET"])
@login_required
@app.route('/upload', methods=["POST", "GET"])
@login_required
def upload():
    if request.method == "POST":
        if request.files:
            req = str(request.form)
            data = ast.literal_eval(req[19:-1])
            handle_request(data, filename)
    return render_template('others/upload.html')

以下方法特定于上面的表单，但如果您想重用代码，它们可能会很有用：

def make_a_list(tuples):
    liste = []
    for i in range(0, len(tuples)):
        liste.append(list(tuples[i]))
    return liste

def count_tracks(liste):
    n = 0
    for i in range(0, len(liste)):
        if liste[i][0] == "title":
            n = n+1
    return n

def create_track(data, track_number):
    track = [data[0][1], data[1][1], find_in_lol(data, "title", track_number), find_in_lol(data, "minutes", track_number), find_in_lol(data, "seconds", track_number), find_in_lol(data, "genre", track_number), find_in_lol(data, "infos", track_number)]
    print(track)
    return track

def handle_tracks_data(x):
    tracks = []
    liste = make_a_list(x)
    n = count_tracks(liste)
    for i in range(1, n+1):
        tracks.append(create_track(liste, i))
    return(tracks)

def find_in_lol(data, word, track_number):
    iteration = 0
    for i in range(0, len(data)):
        if data[i][0] == word:
            iteration = iteration+1
            if iteration == track_number:
                return data[i][1]

如果您想重复使用表单，请务必将“Seconds”重命名为“seconds”，将“info”重命名为“infos”

希望对你有帮助