jQuery实现表单动态加减、ajax表单提交功能

前端之家收集整理的这篇文章主要介绍了jQuery实现表单动态加减、ajax表单提交功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了。现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势。第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作。

好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下。本文主要分为两部分: 一是页面表单动态加减实现,二是复杂表单项提交到controller层。

一、表单动态加减的实现

1.页面效果如下,第一个新增按钮增加的是,费用类型1和资金账户名称横向两栏这块,就称为Div块吧,第二个新增按钮增加的是,资金账户名称横向一栏,称为sonDiv块吧。第二个费用类型1和以下是新增出来的,所以显示删除按钮,同样第二个资金账户名称也是新增出来的,所以也显示删除按钮。

2.代码片段,html部分如下(用的BUI)

*产品名称
*子产品名称
*费用类型1
*资金账户名称
*方向
*交易类型

JS代码部分:

添加 $('#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部分:

页面 } else { BUI.Message.Alert("error:系统异常","error"); } },error : function(data) { BUI.Message.Alert("error:系统异常","error"); } }); });

后台Controller部分:

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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/31970.html
ajaxajax提交表单jquery表单提交

猜你在找的jQuery相关文章