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

2020-05-06 19:19:12 +08:00
 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}
]

现在问题是,取回的值都是一串字符的,不知如何进行分组,各位大佬提点意见,无论前端或者后端进行分组都行。

2836 次点击
所在节点    Django
7 条回复
lenqu
2020-05-06 19:41:24 +08:00
把数据放到前段 json 处理
fanne
2020-05-06 19:45:06 +08:00
@lenqu #1 也想过这么处理,但不知前端 json 怎么处理法
fanne
2020-05-06 19:51:38 +08:00
@lenqu #1 而且,关键点在分组,不知怎么分组法。
georgema1982
2020-05-07 01:40:20 +08:00
这种应该用 formset 处理
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="" />
这样就好了
windychen0
2020-05-07 11:07:16 +08:00
大概的格式你还是要重新调整下吧...好像不完全是你要求的格式,console.log(data)看看就好了
fanne
2020-05-07 12:58:10 +08:00
@windychen0 #6 OK,我试下,多谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/669042

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX