V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fanne
V2EX  ›  Django

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

  •  
  •   fanne · 2020-05-06 19:19:12 +08:00 · 2812 次点击
    这是一个创建于 1660 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端表单

    <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}
    ]
    

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

    第 1 条附言  ·  2020-05-09 11:06:07 +08:00

    新增一个需求,前端需要下拉可选且可自行输入 网上搜了一个js插件

    $('[id=virtual_mem]').editableSelect({
    	effects: 'slide'
    });
    

    多个相同ID进行选择,只有一个ID生效。

    $(‘#virtual_mem,#virtual_mem,#virtual_disk').editableSelect({
    	effects: 'slide'
    });
    

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

    微信截图_20200509110410.png

    7 条回复    2020-05-07 12:58:10 +08:00
    lenqu
        1
    lenqu  
       2020-05-06 19:41:24 +08:00
    把数据放到前段 json 处理
    fanne
        2
    fanne  
    OP
       2020-05-06 19:45:06 +08:00
    @lenqu #1 也想过这么处理,但不知前端 json 怎么处理法
    fanne
        3
    fanne  
    OP
       2020-05-06 19:51:38 +08:00
    @lenqu #1 而且,关键点在分组,不知怎么分组法。
    georgema1982
        4
    georgema1982  
       2020-05-07 01:40:20 +08:00
    这种应该用 formset 处理
    windychen0
        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="" />
    这样就好了
    windychen0
        6
    windychen0  
       2020-05-07 11:07:16 +08:00
    大概的格式你还是要重新调整下吧...好像不完全是你要求的格式,console.log(data)看看就好了
    fanne
        7
    fanne  
    OP
       2020-05-07 12:58:10 +08:00
    @windychen0 #6 OK,我试下,多谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3374 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:36 · PVG 19:36 · LAX 03:36 · JFK 06:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.