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

这篇文章给大家分享的是有关jQuery如何实现表单动态加减、ajax表单提交功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

通海网站建设公司创新互联建站,通海网站设计制作，有大型网站制作公司丰富经验。已为通海成百上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的通海做网站的公司定做！

一、表单动态加减的实现

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

2.代码片段，html部分如下（用的BUI）

//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(); }

//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"); } }); });

@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是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

感谢各位的阅读！关于“jQuery如何实现表单动态加减、ajax表单提交功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

http://dzwzjz.com/article/gojdhh.html

大橙子网站建设，新征程启航

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

jquery是什么

其他资讯