快捷導(dǎo)航

jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能

更新時(shí)間：2018年06月08日 10:59:47 作者：garryfu

本篇文章主要講jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能，本文主要分為兩部分：一是頁(yè)面表單動(dòng)態(tài)加減實(shí)現(xiàn)，二是復(fù)雜表單項(xiàng)提交到controller層。需要的朋友一起學(xué)習(xí)吧

對(duì)于前端開(kāi)發(fā)，我的歸類(lèi)是分2種層次，首先第一種是基于前端架構(gòu)上的開(kāi)發(fā)，有一些后臺(tái)開(kāi)發(fā)的同事會(huì)瞧不起搞前端的，他們認(rèn)為前端無(wú)非是畫(huà)個(gè)頁(yè)面嘛，這就有點(diǎn)夜郎自大了。現(xiàn)在我了解的一些前端框架基本分為3個(gè)主流框架:ReactJs,Vue,angularjs,前兩個(gè)還是目前的主流趨勢(shì)。第二種就是基于市面上的一些非主流工具包，比如BUI，F(xiàn)LatUI等，再結(jié)合自己的dom操作。

好了，廢話(huà)不多說(shuō)了，本篇文章主要講怎么去實(shí)現(xiàn)表單動(dòng)態(tài)加減的效果，花了一天時(shí)間搞出來(lái)，特來(lái)分享一下。本文主要分為兩部分：一是頁(yè)面表單動(dòng)態(tài)加減實(shí)現(xiàn)，二是復(fù)雜表單項(xiàng)提交到controller層。

一、表單動(dòng)態(tài)加減的實(shí)現(xiàn)

1.頁(yè)面效果如下，第一個(gè)新增按鈕增加的是，費(fèi)用類(lèi)型1和資金賬戶(hù)名稱(chēng)橫向兩欄這塊，就稱(chēng)為Div塊吧，第二個(gè)新增按鈕增加的是，資金賬戶(hù)名稱(chēng)橫向一欄，稱(chēng)為sonDiv塊吧。第二個(gè)費(fèi)用類(lèi)型1和以下是新增出來(lái)的，所以顯示是刪除按鈕，同樣第二個(gè)資金賬戶(hù)名稱(chēng)也是新增出來(lái)的，所以也顯示刪除按鈕。

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>產(chǎn)品名稱(chēng)</label>
      <div class="controls">
      <select id="prodName" name="prodName" class="input-normal data-messages="{required:'產(chǎn)品名稱(chēng)'}" data-rules="{required:true}" >
       <option value="">請(qǐng)選擇</option>
       <option value="大毛貸">大毛貸</option>
       <option value="老子貸">老子貸</option>
      </select>
      </div>
     </div>
     <div class="control-group span6">
      <label class="control-label"><s>*</s>子產(chǎn)品名稱(chēng)</label>
      <div class="controls">
      <select id="subProdName" name="subProdName" class="input-normal data-messages="{required:'子產(chǎn)品名稱(chēng)'}" data-rules="{required:true}" >
       <option value="">請(qǐng)選擇</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>費(fèi)用類(lèi)型1</label>
      <div class="controls">
      <select id="feeType1" name="feeType1" class="input-normal data-messages="{required:'費(fèi)用類(lèi)型1'}" data-rules="{required:true}" >
       <option value="">請(qǐng)選擇</option>
       <option value="放款">放款</option>
       <option value="保費(fèi)">保費(fèi)</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>資金賬戶(hù)名稱(chēng)</label>
      <div class="controls">
      <select id="fundName" name="fundName" class="input-normal data-messages="{required:'資金賬戶(hù)名稱(chēng)'}" data-rules="{required:true}" >
       <option value="">請(qǐng)選擇</option>
       <option value="XX保證金">XX保證金</option>
       <option value="XX儲(chǔ)備金">XX儲(chǔ)備金</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="">請(qǐng)選擇</option>
       <option value="調(diào)增">調(diào)增</option>
       <option value="調(diào)減">調(diào)減</option>
      </select>
      </div>
      </div>
      <div class="control-group span6">
      <label class="control-label"><s>*</s>交易類(lèi)型</label>
      <div class="controls">
      <select id="transType" name="transType" class="input-normal data-messages="{required:'交易類(lèi)型'}" data-rules="{required:true}" >
       <option value="">請(qǐng)選擇</option>
       <option value="提現(xiàn)">提現(xiàn)</option>
       <option value="保證金繳保費(fèi)">保證金繳保費(fèi)</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();
  }

頁(yè)面展示部分效果基本完成，其中有部分代碼注釋的，那是我調(diào)試的代碼，可以忽略，雖然不對(duì)，但可以作為糾錯(cuò)參考，可以想想為啥不對(duì)。

二、復(fù)雜表單項(xiàng)提交到controller

接著上面，頁(yè)面展示好了，后面要做的就是把表單內(nèi)容提交到后臺(tái)，后臺(tái)我用的是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(){ //循環(huán)div1
    var div1=$(this);
    var feeType1Var = div1.find("select[name='feeType1']").val();
    div1.find('.subDiv1').each(function(){ //循環(huán)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");
      // 刷新頁(yè)面
     } else {
      BUI.Message.Alert("error:系統(tǒng)異常", "error");
     }
    },
    error : function(data) {
     BUI.Message.Alert("error:系統(tǒng)異常", "error");
    }
   });
  });

后臺(tái)Controller部分：

@RequestMapping("/addFundConfigToDB")
 @ResponseBody
 public JSONObject modifyTransCodeToDB(HttpServletRequest request, Map<String, Object> model) {
  //log.info("交易類(lèi)型--------------------修改落庫(kù)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("修改交易類(lèi)型，id = {}，名稱(chēng) = {},當(dāng)前用戶(hù) ={}", id, transName, userName);
  if (dataArry.length > 1) {
   json.put("msg", "success"); 
   return json;
  } else {
   json.put("msg", "fail"); 
   return json;
  }
 }

總結(jié)

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: