js 上传不确定数量的变量
jsform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/jsform/css/jsform.css">
</head>
<body>
<button onclick="insert()">添加</button>
<div id="tablecontent"></div>
<button onclick="sub()">提交</button>
</body>
<script src="/static/jsform/js/jquery-4.3.1.min.js"></script>
<script type="text/javascript">
function insert(x)
{
var li_node=document.createElement("li");
var input_node=document.createElement("input");
var delete_button_node = document.createElement("button");
li_node.appendChild(input_node);
li_node.appendChild(delete_button_node);
input_node.setAttribute("class", "inputclass");
delete_button_node.setAttribute("class", "delete_button");
delete_button_node.onclick = function () {
$(this.parentNode).remove();
};
delete_button_node.innerText = "X";
{# jquery start#}
{#let jquery_tablecontent =$('#tablecontent');#}
{#jquery_tablecontent.append(li_node);#}
{# jquery end#}
{# js start#}
let js_tablecontent = document.getElementById("tablecontent");
js_tablecontent.appendChild(li_node);
{# js end#}
}
function sub() {
var inputs = document.getElementsByClassName("inputclass");
console.log(inputs.length);
var tag_List =[];
for(i=0;i<inputs.length;i++)
{
console.log(inputs[i].value);
tag_List.push(inputs[i].value);
}
$.post("/jsform/", {tag_List: JSON.stringify(tag_List)});
}
function delete_tag()
{
delete(this.parentNode.parentNode.id);
}
</script>
</html>
jsform.css
.delete_button
{
background-color: red;
}
views.py
def jsform(request):
if request.method == "POST":
tag_List_json = request.POST["tag_List"]
tag_List = json.loads(tag_List_json)
print(type(tag_List))
print(tag_List)
return render(request, "jsform.html")