html中动态提交表单提交,jQuery实现表单动态加减、ajax表单
提交功能
对于前端开发，我的归类是分2种层次，⾸先第⼀种是基于前端架构上的开发，有⼀些后台开发的同事会瞧不起搞前端的，他们认为前端⽆⾮是画个页⾯嘛，这就有点夜郎⾃⼤了。现在我了解的⼀些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs，前两个还是⽬前的主流趋势。第⼆种就是基于市⾯上的⼀些⾮主流⼯具包，⽐如BUI，FLatUI等，再结合⾃⼰的dom操作。
好了，废话不多说了，本篇⽂章主要讲怎么去实现表单动态加减的效果，花了⼀天时间搞出来，特来分享⼀下。本⽂主要分为两部分： ⼀是页⾯表单动态加减实现，⼆是复杂表单项提交到controller层。
⼀、表单动态加减的实现
1.页⾯效果如下，第⼀个新增按钮增加的是，费⽤类型1和资⾦账户名称横向两栏这块，就称为Div块吧，第⼆个新增按钮增加的是，资⾦账户名称横向⼀栏，称为sonDiv块吧。第⼆个费⽤类型1和以下是新增出来的，所以显⽰是删除按钮，同样第⼆个资⾦账户名称也是新增出来的，所以也显⽰删除按钮。
2.代码⽚段，html部分如下(⽤的BUI)
*产品名称
请选择
⼤⽑贷
⽼⼦贷
*⼦产品名称
请选择
⼩⽑贷
⼩⼦贷
*费⽤类型1
请选择
放款
保费
*资⾦账户名称
请选择
XX保证⾦
XX储备⾦
*⽅向
请选择
调减
*交易类型
请选择
提现
保证⾦缴保费
新增
提交
返回
JS代码部分：
//div1模块添加
$('#div1BtnAdd').on('click', function() {
var div1 = $('#div1').clone(true);
// div1.find("input[id='div1BtnAdd']").attr("value","删除");
// div1.find("input[id='div1BtnAdd']").attr("onclick","deleteParent($(this))"); // div1.find("input[id='div1BtnAdd']").removeAttr("id");
div1.find("input[id='div1BtnAdd']").replaceWith('');
div1.appendTo('#J_Form');
});
//div1⼦模块⾏添加
function addSubDiv1(obj){
var subDiv1 = $('#subDiv1').clone(true);
subDiv1.find("button[id='subDiv1BtnAdd']").remove();
subDiv1.append('').appendTo(obj.parents('#subDiv1').parents('#div1'));
}
//div1⼦模块⾏添加
/** $('#subDiv1BtnAdd').on('click', function() {
var subDiv1 = $('#subDiv1').clone(true);
subDiv1.find("button[id='subDiv1BtnAdd']").remove()
subDiv1.append('').appendTo('#div1');
});
*/
function deleteDiv1(obj){
obj.parents('#div1').remove();
function deleteSubDiv1(obj){
obj.parents('#subDiv1').remove();
}
页⾯展⽰部分效果基本完成，其中有部分代码注释的，那是我调试的代码，可以忽略，虽然不对，但可以作为纠错参考，可以想想为啥不对。
⼆、复杂表单项提交到controller
接着上⾯，页⾯展⽰好了，后⾯要做的就是把表单内容提交到后台，后台我⽤的是springMvc接收的，直接看代码吧
JS部分：
//var obj = $("#J_Form").serialize();
$("#btnSubmit").click(function(){
var prodName = $("#J_Form").find("select[name='prodName']").val();
var subProdName = $("#J_Form").find("select[name='subProdName']").val();
var div1Arr = new Array();
var obj = new Object();
$('.div1').each(function(){ //循环div1
var div1=$(this);
var feeType1Var = div1.find("select[name='feeType1']").val();
div1.find('.subDiv1').each(function(){ //循环subDiv1
var subDiv1=$(this);
var obj = new Object();
obj.feeType = feeType1Var;
obj.fundName = subDiv1.find("select[name='fundName']").val();
obj.dest = subDiv1.find("select[name='dest']").val();
div1Arr.push(JSON.stringify(obj));
});
})
$.ajax({
type : 'POST',
traditional:true,//防⽌深度序列化
cache:false,
async:false,
dataType : 'json',
url : '/fundAcct/menu/addFundConfigToDB',
data : {
"prodName" : prodName,
"subProdName" : subProdName,html中提交表单用什么属性
"dataArr" :div1Arr
},
success : function(data) {
if (data.msg=='success') {
BUI.Message.Alert("success", "success");
// 刷新页⾯
} else {
BUI.Message.Alert("error：系统异常", "error");
}
},
error : function(data) {
BUI.Message.Alert("error：系统异常", "error");
}
});
});
后台Controller部分：
@RequestMapping("/addFundConfigToDB")
@ResponseBody
public JSONObject modifyTransCodeToDB(HttpServletRequest request, Map model) { //log.info("交易类型--------------------修改落库DB");
JSONObject json = new JSONObject();
Map webParaMap = ParameterMap();
String dataArry[] = ("dataArr");// TODO parse to Object
String prodName = ("prodName")[0];
String subProdName = ("subProdName")[0];
String userName = null;
if (null != CurrentUser(request)) {
userName = CurrentUser(request).getName();
}
//log.info("修改交易类型，id = {}，名称 = {}，当前⽤户 ={}", id, transName, userName);
if (dataArry.length > 1) {
json.put("msg", "success");
return json;
} else {
json.put("msg", "fail");
return json;
}
}
总结
以上所述是⼩编给⼤家介绍的jQuery实现表单动态加减、ajax表单提交功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。