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;
...
}