form表單提交 list對象給Java 後臺結合

 <div class="form-group" style="display: none;">
                    <!-- 保存使用 -->
                    <label class="col-sm-1 control-label " >員工計劃id</label>
                        <div class="col-sm-8">
                            <input type="text"  name="pscoreVoc[${planeeMy.num}].eeplanid" 
                             class="form-field col-xs-10 col-sm-4"
                              value="${planeeMy.hepplaneePo.id}" 
                               />
                        </div>
                    <label class="col-sm-1 control-label " >員工計劃類別</label>
                        <div class="col-sm-8">
                            <input type="text"  name="pscoreVoc[${planeeMy.num}].type" 
                             class="form-field col-xs-10 col-sm-4"
                              value="${planeeMy.hepplaneePo.type}" 
                               />
                        </div>
                </div>

上面是結合了 freemker 的，若是是 jsp也是相似的。能夠經過後端傳過來的數據控制 ，元素的命名

 

同理若是是 動態 新增提交的話，能夠動態生成input

$(".form_list_ul").each(function(i){
             var mat = $(this).find('[name="mat"]').val();
             var peDetails_inciseWay = $(this).find('[name="peDetails_inciseWay"]').val();
             var num = $(this).find('[name="Number_id"]').val();
             var requi = $(this).find('[name="peDetails_explain"]').val();
             var thickness = $(this).find("input[name='peDetails_thickness0']").val();
             var width = $(this).find("input[name='peDetails_width0']").val();
             var length = $(this).find("input[name='peDetails_length0']").val();
             var consultWeight  = $(this).find("input[name='Reference']").val();
             var modelNo  = $(this).find("input[name='modelNo']").val();
            if (mat != "" && thickness != "" && width != "" && length != "") {
            var peDetails_spec_type = parseInt($(this).find('[name="type1"]').val());       
            var dataItem = {
                "id": $(this).find("input[name='peDetails_id']").val(),
                "inciseWay": peDetails_inciseWay,//切割方式
                "texture" : mat,//材質
                "num": num,//件數
                "specType": peDetails_spec_type,//類型
                "thickness": thickness,
                "width": width,
                "length": length,
                "explain":$(this).find("textarea[name='peDetails_explain']").val(),
                "consultWeight":consultWeight,//參考重量
                "modelNo":modelNo//模號
            };
            $("#enquiry_details").append(createEnquiryDetailHidden(dataItem, i));
            }
        });

 

 

function createEnquiryDetailHidden(item, i){    
        var hiddenHtml = [];
        var nameStart = "peDetails["+count+"].";
        hiddenHtml.push(createHiddenField(nameStart+"id", item.id));
        hiddenHtml.push(createHiddenField(nameStart+"texture", item.texture));
        hiddenHtml.push(createHiddenField(nameStart+"inciseWay", item.inciseWay));
        hiddenHtml.push(createHiddenField(nameStart+"num", item.num));
        hiddenHtml.push(createHiddenField(nameStart+"specType", item.specType));
        if(item.specType == 1 || item.specType == 2 || item.specType == 5 || item.specType == 6){
            hiddenHtml.push(createHiddenField(nameStart+"thickness", item.thickness));
            hiddenHtml.push(createHiddenField(nameStart+"width", item.width));
            hiddenHtml.push(createHiddenField(nameStart+"length", item.length));
        }  
        hiddenHtml.push(createHiddenField(nameStart+"explain", item.explain));
        hiddenHtml.push(createHiddenField(nameStart+"modelNo", item.modelNo));
        count+=1;
        return hiddenHtml.join("");
    }

    /**
     * 一個Hidden
     * @param name
     * @param value
     * @returns {String}
     */
    function createHiddenField(name, value){
        return "<input type='hidden' name='"+name+"' value='"+value+"'>\n";
    }

 

 

這樣就可使用 form 表單直接提交了