javascript - Flask 应用程序 - 如何使用 JavaScript 处理 x 多行表单
问题描述
我正在尝试创建一个页面,用户可以选择用不同的值填充 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 %}
解决方案
我不知道 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”
我希望它会有所帮助
推荐阅读
- php - 从多数组中过滤多个值
- quarkus - 在没有 docker 的情况下创建 quarkus runner
- java - Recycleview 未显示匹配父级
- android - 无法解决“在模块中发现重复的类 com.google.android.gms.internal.vision.zzdt”错误,
- python-3.x - 如何在 python 中获取合并表列重采样?
- python - 使用python中的分割从图像中提取特定区域
- jquery - JQuery - 将数组元素设置为每个属性值
- amazon-web-services - 快照大小如何影响 Amazon Redshift 中的还原过程?
- python - 我正在尝试从网站中提取特定表格,但我在执行此操作时遇到问题
- java - 运行 apksigner verify 时出错