欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年06月08日 10:59:47   作者：garryfu  
本篇文章主要講jQuery實現(xiàn)表單動態(tài)加減、ajax表單提交功能，本文主要分為兩部分： 一是頁面表單動態(tài)加減實現(xiàn)，二是復(fù)雜表單項提交到controller層。需要的朋友一起學(xué)習(xí)吧

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

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

一、表單動態(tài)加減的實現(xiàn)

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>產(chǎn)品名稱</label>
      <div class="controls">
      <select id="prodName" name="prodName" class="input-normal data-messages="{required:'產(chǎn)品名稱'}" 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>子產(chǎn)品名稱</label>
      <div class="controls">
      <select id="subProdName" name="subProdName" class="input-normal data-messages="{required:'子產(chǎn)品名稱'}" 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="調(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>交易類型</label>
      <div class="controls">
      <select id="transType" name="transType" class="input-normal data-messages="{required:'交易類型'}" data-rules="{required:true}" >
       <option value="">請選擇</option>
       <option value="提現(xiàn)">提現(xiàn)</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();
  }

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

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

接著上面，頁面展示好了，后面要做的就是把表單內(nè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");
      // 刷新頁面
     } else {
      BUI.Message.Alert("error:系統(tǒng)異常", "error");
     }
    },
    error : function(data) {
     BUI.Message.Alert("error:系統(tǒng)異常", "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;
  }
 }

總結(jié)

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

相關(guān)文章

最新評論