单个 form 表单提交多个值 django 获取问题

[fanne]

前端表单

<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'
});

也是一个输入框生效的。这种的要怎么处理？

[lenqu]

把数据放到前段 json 处理

[fanne]

@lenqu #1 也想过这么处理，但不知前端 json 怎么处理法

[fanne]

@lenqu #1 而且，关键点在分组，不知怎么分组法。

[georgema1982]

这种应该用 formset 处理

[windychen0]

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="" />
这样就好了

[windychen0]

大概的格式你还是要重新调整下吧...好像不完全是你要求的格式,console.log(data)看看就好了

[fanne]

@windychen0 #6 OK，我试下，多谢。