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


Posted in jQuery onJune 08, 2018

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

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

一、表单动态加减的实现

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

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

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

<div class="panel" style="margin-bottom: 10px;">
  <div class="panel-body">
   <form id="J_Form" class="form-horizontal" action="" method="get">
     <div class="row-fluid">
     <div class="control-group span6">
      <label class="control-label"><s>*</s>产品名称</label>
      <div class="controls">
      <select id="prodName" name="prodName" class="input-normal data-messages="{required:'产品名称'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="大毛贷">大毛贷</option>
       <option value="老子贷">老子贷</option>
      </select>
      </div>
     </div>
     <div class="control-group span6">
      <label class="control-label"><s>*</s>子产品名称</label>
      <div class="controls">
      <select id="subProdName" name="subProdName" class="input-normal data-messages="{required:'子产品名称'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="小毛贷">小毛贷</option>
       <option value="小子贷">小子贷</option>
      </select>
      </div>
     </div>
    </div> 
    <div class="row-fluid">
     <hr style="height:1px;padding-bottom:20px;margin:0 auto;filter:alpha(opacity:30);opacity:0.5;border:none;border-top:1px solid #778899;"/>
    </div>
    <div id="div1" class="div1 row-fluid">
     <div class="row-fluid">
      <div class="control-group span6">
      <label class="control-label"><s>*</s>费用类型1</label>
      <div class="controls">
      <select id="feeType1" name="feeType1" class="input-normal data-messages="{required:'费用类型1'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="放款">放款</option>
       <option value="保费">保费</option>
      </select>
      </div>
      </div>
      <input id="div1BtnAdd" type="button" value="新增" class="button button-submit">
     </div>
     <div id="subDiv1" class="subDiv1 row-fluid">
      <div class="control-group span6">
      <label class="control-label"><s>*</s>资金账户名称</label>
      <div class="controls">
      <select id="fundName" name="fundName" class="input-normal data-messages="{required:'资金账户名称'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="XX保证金">XX保证金</option>
       <option value="XX储备金">XX储备金</option>
      </select>
      </div>
      </div>
      <div class="control-group span6">
      <label class="control-label"><s>*</s>方向</label>
      <div class="controls">
      <select id="dest" name="dest" class="input-normal data-messages="{required:'方向'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="调增">调增</option>
       <option value="调减">调减</option>
      </select>
      </div>
      </div>
      <div class="control-group span6">
      <label class="control-label"><s>*</s>交易类型</label>
      <div class="controls">
      <select id="transType" name="transType" class="input-normal data-messages="{required:'交易类型'}" data-rules="{required:true}" >
       <option value="">请选择</option>
       <option value="提现">提现</option>
       <option value="保证金缴保费">保证金缴保费</option>
      </select>
      </div>
      </div>
      <button id="subDiv1BtnAdd" type="button" onclick="addSubDiv1($(this))" class="button button-submit">新增</button>
     </div>
    </div>
   </form>
  </div>
  <div class="row-fluid">
   <div class="form-actions">
    <button type="button" id="btnSubmit" class="button button-submit">提交</button>
    <button type="button" id="btnback" class="button button-back "><span class="span-back">返回</span></button>
   </div>
  </div>
 </div>

    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('<input type="button" value="删除" class="button button-submit" onclick="deleteDiv1($(this))" >');
   div1.appendTo('#J_Form');
  });
  //div1子模块行添加
  function addSubDiv1(obj){
   var subDiv1 = $('#subDiv1').clone(true);
   subDiv1.find("button[id='subDiv1BtnAdd']").remove();
   subDiv1.append('<input type="button" value="删除" class="button button-submit" onclick="deleteSubDiv1($(this))" >').appendTo(obj.parents('#subDiv1').parents('#div1'));
  }
  //div1子模块行添加
  /** $('#subDiv1BtnAdd').on('click', function() {
   var subDiv1 = $('#subDiv1').clone(true);
   subDiv1.find("button[id='subDiv1BtnAdd']").remove()
   subDiv1.append('<input type="button" value="删除" class="button button-submit" onclick="deleteSubDiv1($(this))" >').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<String, Object> model) {
  //log.info("交易类型--------------------修改落库DB");
  JSONObject json = new JSONObject();
  Map<String, String[]> 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表单提交功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
js中开关变量使用实例
2017/02/24 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
团队精神演讲稿
2013/12/31 职场文书
实习单位鉴定评语
2014/04/26 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
离婚协议书格式
2014/11/21 职场文书
毕业生评语大全
2015/01/04 职场文书
何玥事迹观后感
2015/06/16 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL