1、需求描述

在Web开发中，有这样一种场景，需要在页面上动态生成多组输入组件，如“亲属信息”、“教育信息”等。

2、界面原型

3、前端伪代码

为HTML组件，如学历，命名时，每个组件的name属性使用相同的名称，如education，id属性可使用id_education_1、id_education_2，依此类推，方便后续使用JQuery选择器遍历、取值和格式校验。如果使用JavaScript模板引擎，如doT.js，那就更方便了，id_education_{{=index}}}。

每次点击“新增时”，可以根据某组件出现的个数作为序号：

var index= $("input[name='education']").length;

提交表单时，可以使用：

formData : function(actionUrl, formId, callback) {
    $('#'+formId).serialize(); // 因为输入组件个数不确定，这种方法最佳
    var ajax_option={
        type : "POST",
        dataType: "json",
        async : true,
        url:actionUrl,
        success:function(data){
            callback(data);
        },
        error:function(error) {
        }
    };
    $('#'+formId).ajaxSubmit(ajax_option);
}

4、后端伪代码

public void insertEmployeeInfo(@ModelAttribute Employee employee) {
...
}

public class Employee {
    private String[] name;
    private String[] relationship;
    private String[] mobile;
	
    private String[] education;
    private String[] school;
    private String[] middlemanMobile;
	...
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/17322.html