前端表单
<form class="form-horizontal" id="jsStayForm" method="post">
<table class="table">
<thead>
<tr>
<th>aaa</th>
<th>bbb(GB)</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr id="tradds">
<td>
<select class="form-control" name="virtual_cpu1" id="virtual_cpu1">
{% for cpu_i in cpu_list %}
<option value="{{ cpu_i }}">{{ cpu_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_mem1" id="virtual_mem1">
{% for mem_i in mem_list %}
<option value="{{ mem_i }}">{{ mem_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_disk1" id="virtual_disk1">
{% for disk_i in disk_list %}
<option value="{{ disk_i }}">{{ disk_i }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr id="tradds">
<td>
<select class="form-control" name="virtual_cpu2" id="virtual_cpu2">
{% for cpu_i in cpu_list %}
<option value="{{ cpu_i }}">{{ cpu_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_mem2" id="virtual_mem2">
{% for mem_i in mem_list %}
<option value="{{ mem_i }}">{{ mem_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_disk2" id="virtual_disk2">
{% for disk_i in disk_list %}
<option value="{{ disk_i }}">{{ disk_i }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td>
<select class="form-control" name="virtual_cpu3" id="virtual_cpu3">
{% for cpu_i in cpu_list %}
<option value="{{ cpu_i }}">{{ cpu_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_mem3" id="virtual_mem3">
{% for mem_i in mem_list %}
<option value="{{ mem_i }}">{{ mem_i }}</option>
{% endfor %}
</select>
</td>
<td>
<select class="form-control m-b" name="virtual_disk3" id="virtual_disk3">
{% for disk_i in disk_list %}
<option value="{{ disk_i }}">{{ disk_i }}</option>
{% endfor %}
</select>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="button" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)">新增一行</button>
<button class="btn btn-primary" id="jsStayBtn">添加</button>
{% csrf_token %}
</form>
# ajax 进行表单提交$('#jsStayForm').serialize()
<script type="text/javascript">
$('#jsStayBtn').click(function (event) {
event.preventDefault();
console.log($('#jsStayForm').serialize());
alert($('#jsStayForm').serialize());
$.ajax({
cache: false,
type: 'POST',
url: '{% url "assets:virtualadd" %}',
data: $('#jsStayForm').serialize(),
datetype: 'json',
....
....
});
})
</script>
提交后,获取到的值为
virtual_cpu1=1&virtual_mem1=8&virtual_disk1=50&virtual_vlan1=1021&project1=111&nums1=1&virtual_cpu3=2&virtual_mem3=12&virtual_disk3=200virtual_vlan3=1021&project3=222&nums3=1&virtual_cpu2=3&virtual_mem2=18&virtual_disk2=150&virtual_vlan2=1021&project2=3333&nums2=1
那么我后台要怎么拆分处理这一串内容。
def post(self, request):
virtual_post_data = request.POST
for key,value in virtual_post_data.items():
print(key,value)
打印出 key,value 值如下
virtual_cpu1 1
virtual_mem1 2
virtual_disk1 50
virtual_vlan1 1021
project1
nums1 1
virtual_cpu3 3
virtual_mem3 2
virtual_disk3 50
virtual_vlan3 1021
project3
nums3 1
virtual_cpu2 2
virtual_mem2 2
virtual_disk2 50
virtual_vlan2 1021
project2
nums2 1
我最终需要的结果是,key 值最后数字一样的分为一个组
[
{'virtual_cpu1':1,'virtual_mem1':2,'virtual_disk1':50},
{'virtual_cpu2':1,'virtual_mem2':2,'virtual_disk2':50},
{'virtual_cpu3':1,'virtual_mem3':2,'virtual_disk3':50}
]
现在问题是,取回的值都是一串字符的,不知如何进行分组,各位大佬提点意见,无论前端或者后端进行分组都行。
新增一个需求,前端需要下拉可选且可自行输入 网上搜了一个js插件
$('[id=virtual_mem]').editableSelect({
effects: 'slide'
});
多个相同ID进行选择,只有一个ID生效。
$(‘#virtual_mem,#virtual_mem,#virtual_disk').editableSelect({
effects: 'slide'
});
也是一个输入框生效的。这种的要怎么处理?
1
lenqu 2020-05-06 19:41:24 +08:00
把数据放到前段 json 处理
|
4
georgema1982 2020-05-07 01:40:20 +08:00
这种应该用 formset 处理
|
5
windychen0 2020-05-07 11:05:36 +08:00
function formatSubmitData(submitFormElement,isProcessData) {
var formDataArr = $(submitFormElement).serializeArray(); var data = {}; for (var i = 0; i < formDataArr.length; i++) { data[formDataArr[i].name] = formDataArr[i].value; } return (isProcessData?data:JSON.stringify(data)); } <img src="https://s1.ax1x.com/2020/05/07/YZaaJU.png" alt="" /> 这样就好了 |
6
windychen0 2020-05-07 11:07:16 +08:00
大概的格式你还是要重新调整下吧...好像不完全是你要求的格式,console.log(data)看看就好了
|
7
fanne OP @windychen0 #6 OK,我试下,多谢。
|