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.repayWay = 0;

obj.fundName = subDiv1.find("select[name='fundName']").val();

obj.dest = subDiv1.find("select[name='dest']").val();

obj.transType = subDiv1.find("select[name='transType']").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,

"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 = request.getParameterMap();

String dataArry[] = webParaMap.get("dataArr");// TODO parse to Object

String prodName = webParaMap.get("prodName")[0];

String subProdName = webParaMap.get("subProdName")[0];

String userName = null;

if (null != SsoSession.getCurrentUser(request)) {

userName = SsoSession.getCurrentUser(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表单提交功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！