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

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

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

一、表单动态加减的实现

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

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表单提交功能，希望对大家有所帮助