微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!
jQuery实现表单动态加减、ajax表单提交功能
对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了。现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势。第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作。
好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下。本文主要分为两部分: 一是页面表单动态加减实现,二是复杂表单项提交到controller层。
一、表单动态加减的实现
1.页面效果如下,第一个新增按钮增加的是,费用类型1和资金账户名称横向两栏这块,就称为Div块吧,第二个新增按钮增加的是,资金账户名称横向一栏,称为sonDiv块吧。第二个费用类型1和以下是新增出来的,所以显示是删除按钮,同样第二个资金账户名称也是新增出来的,所以也显示删除按钮。
2.代码片段,html部分如下(用的BUI)
JS代码部分:
页面展示部分效果基本完成,其中有部分代码注释的,那是我调试的代码,可以忽略,虽然不对,但可以作为纠错参考,可以想想为啥不对。
二、复杂表单项提交到controller
接着上面,页面展示好了,后面要做的就是把表单内容提交到后台,后台我用的是springMvc接收的,直接看代码吧
JS部分:
rush: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/addFundCon
figToDB',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部分:
rush:js;">
@RequestMapping("/addFundCon
figToDB")
@ResponseBody
public JSONObject modifyTransCod
etoDB(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表单提交功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。