Jquery實現表單動態加減、ajax表單提交

本文轉載自查看原文 2018-06-08 10:29 1249 前端相關/ Jquery/ 表單動態加減/ ajax表單提交

一直在搞Java后台開發，記得剛工作那一兩年時間搞過前后端交互開發，用的東西也是五花八門，當時覺得做頁面展示給別人看，是很有成就的事情，不過現在感覺自己跟純前端開發比起來弱爆了，不過如果你的目標是作為一個全棧開發工程師，最起碼各方面也拿的出手吧。

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

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

一、表單動態加減的實現

1.頁面效果如下，第一個新增按鈕增加的是，費用類型1和資金賬戶名稱橫向兩欄這塊，就稱為Div塊吧，第二個新增按鈕增加的是，資金賬戶名稱橫向一欄，稱為sonDiv塊吧。第二個費用類型1和以下是新增出來的，所以顯示是刪除按鈕，同樣第二個資金賬戶名稱也是新增出來的，所以也顯示刪除按鈕。

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

  1     <div class="panel" style="margin-bottom: 10px;">
  2 
  3         <div class="panel-body">
  4             <form id="J_Form" class="form-horizontal" action="" method="get">
  5                 
  6                  <div class="row-fluid">
  7                     <div class="control-group span6">
  8                         <label class="control-label"><s>*</s>產品名稱</label>
  9                         <div class="controls">
 10                         <select id="prodName" name="prodName" class="input-normal data-messages="{required:'產品名稱'}" data-rules="{required:true}" >
 11                             <option value="">請選擇</option>
 12                             <option value="大毛貸">大毛貸</option>
 13                             <option value="老子貸">老子貸</option>
 14                         </select>
 15                         </div>
 16                     </div>
 17                     <div class="control-group span6">
 18                         <label class="control-label"><s>*</s>子產品名稱</label>
 19                         <div class="controls">
 20                         <select id="subProdName" name="subProdName" class="input-normal data-messages="{required:'子產品名稱'}" data-rules="{required:true}" >
 21                             <option value="">請選擇</option>
 22                             <option value="小毛貸">小毛貸</option>
 23                             <option value="小子貸">小子貸</option>
 24                         </select>
 25                       </div>
 26                    </div>
 27                 </div>    
 28                 
 29                 <div class="row-fluid">
 30                    <hr style="height:1px;padding-bottom:20px;margin:0 auto;filter:alpha(opacity:30);opacity:0.5;border:none;border-top:1px solid #778899;"/>
 31                 </div>
 32                 
 33                 <div id="div1" class="div1 row-fluid">
 34                   
 35                    <div class="row-fluid">
 36                       <div class="control-group span6">
 37                         <label class="control-label"><s>*</s>費用類型1</label>
 38                         <div class="controls">
 39                         <select id="feeType1" name="feeType1" class="input-normal data-messages="{required:'費用類型1'}" data-rules="{required:true}" >
 40                             <option value="">請選擇</option>
 41                             <option value="放款">放款</option>
 42                             <option value="保費">保費</option>
 43                         </select>
 44                         </div>
 45                       </div>
 46                       <input id="div1BtnAdd" type="button" value="新增" class="button button-submit">
 47                    </div>
 48                    
 49                    <div id="subDiv1" class="subDiv1 row-fluid">
 50                       <div class="control-group span6">
 51                         <label class="control-label"><s>*</s>資金賬戶名稱</label>
 52                         <div class="controls">
 53                         <select id="fundName" name="fundName" class="input-normal data-messages="{required:'資金賬戶名稱'}" data-rules="{required:true}" >
 54                             <option value="">請選擇</option>
 55                             <option value="XX保證金">XX保證金</option>
 56                             <option value="XX儲備金">XX儲備金</option>
 57                         </select>
 58                         </div>
 59                       </div>
 60                       
 61                       <div class="control-group span6">
 62                         <label class="control-label"><s>*</s>方向</label>
 63                         <div class="controls">
 64                         <select id="dest" name="dest" class="input-normal data-messages="{required:'方向'}" data-rules="{required:true}" >
 65                             <option value="">請選擇</option>
 66                             <option value="調增">調增</option>
 67                             <option value="調減">調減</option>
 68                         </select>
 69                         </div>
 70                       </div>
 71                       
 72                        <div class="control-group span6">
 73                         <label class="control-label"><s>*</s>交易類型</label>
 74                         <div class="controls">
 75                         <select id="transType" name="transType" class="input-normal data-messages="{required:'交易類型'}" data-rules="{required:true}" >
 76                             <option value="">請選擇</option>
 77                             <option value="提現">提現</option>
 78                             <option value="保證金繳保費">保證金繳保費</option>
 79                         </select>
 80                         </div>
 81                       </div>
 82                       
 83                       <button id="subDiv1BtnAdd" type="button"  onclick="addSubDiv1($(this))" class="button button-submit">新增</button>
 84                       
 85                    </div>
 86                  
 87                 </div>
 88             
 89             </form>
 90         </div>
 91         
 92             
 93         <div class="row-fluid">
 94             <div class="form-actions">
 95                 <button type="button" id="btnSubmit" class="button button-submit">提交</button>
 96                 <button type="button" id="btnback" class="button button-back "><span class="span-back">返回</span></button>
 97             </div>
 98         </div>
 99             
100     </div>

JS代碼部分：

 1     
 2         //div1模塊添加
 3         $('#div1BtnAdd').on('click', function() {
 4             var div1 = $('#div1').clone(true);
 5            // div1.find("input[id='div1BtnAdd']").attr("value","刪除");
 6            // div1.find("input[id='div1BtnAdd']").attr("onclick","deleteParent($(this))");
 7            // div1.find("input[id='div1BtnAdd']").removeAttr("id");
 8             div1.find("input[id='div1BtnAdd']").replaceWith('<input type="button" value="刪除" class="button button-submit" onclick="deleteDiv1($(this))" >');
 9             div1.appendTo('#J_Form');
10         });
11         
12         //div1子模塊行添加
13         function addSubDiv1(obj){
14             var subDiv1 = $('#subDiv1').clone(true);
15             subDiv1.find("button[id='subDiv1BtnAdd']").remove();
16             subDiv1.append('<input type="button" value="刪除" class="button button-submit" onclick="deleteSubDiv1($(this))" >').appendTo(obj.parents('#subDiv1').parents('#div1'));
17         }
18         
19         //div1子模塊行添加
20        /** $('#subDiv1BtnAdd').on('click', function() {
21             var subDiv1 = $('#subDiv1').clone(true);
22             subDiv1.find("button[id='subDiv1BtnAdd']").remove()
23             subDiv1.append('<input type="button" value="刪除" class="button button-submit" onclick="deleteSubDiv1($(this))" >').appendTo('#div1');
24         });
25         */
26         function deleteDiv1(obj){
27             obj.parents('#div1').remove();
28         }
29         
30         function deleteSubDiv1(obj){
31             obj.parents('#subDiv1').remove();
32         }

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

二、復雜表單項提交到controller

接着上面，頁面展示好了，后面要做的就是把表單內容提交到后台，后台我用的是springMvc接收的，直接看代碼吧

JS部分：

 1 //var obj = $("#J_Form").serialize();
 2         $("#btnSubmit").click(function(){
 3             var prodName = $("#J_Form").find("select[name='prodName']").val();
 4             var subProdName = $("#J_Form").find("select[name='subProdName']").val();
 5             
 6             var div1Arr = new Array(); 
 7             var obj = new Object();
 8             $('.div1').each(function(){ //循環div1
 9                 var div1=$(this);
10                 
11                 var feeType1Var = div1.find("select[name='feeType1']").val();
12                 
13                 div1.find('.subDiv1').each(function(){ //循環subDiv1
14                     var subDiv1=$(this);
15                     var obj = new Object();
16                     obj.feeType = feeType1Var;
17                     obj.repayWay = 0;
18                     obj.fundName = subDiv1.find("select[name='fundName']").val();
19                     obj.dest = subDiv1.find("select[name='dest']").val();
20                     obj.transType = subDiv1.find("select[name='transType']").val();
21                     
22                     div1Arr.push(JSON.stringify(obj));
23                 });
24                 
25             })
26             $.ajax({
27                 type : 'POST',
28                 traditional:true,//防止深度序列化
29                 cache:false,
30                 async:false,
31                 dataType : 'json',
32                 url : '/fundAcct/menu/addFundConfigToDB',
33                 data : {
34                     "prodName" : prodName,
35                     "subProdName" : subProdName,
36                     "dataArr" :div1Arr
37                 },
38                 success : function(data) {
39                     if (data.msg=='success') {
40                         BUI.Message.Alert("success", "success");
41                         // 刷新頁面
42                     } else {
43                         BUI.Message.Alert("error:系統異常", "error");
44                     }
45                 },
46                 error : function(data) {
47                     BUI.Message.Alert("error:系統異常", "error");
48                 }
49                 
50             });
51         
52         });

后台Controller部分：

 1 @RequestMapping("/addFundConfigToDB")
 2     @ResponseBody
 3     public JSONObject modifyTransCodeToDB(HttpServletRequest request, Map<String, Object> model) {
 4         //log.info("交易類型--------------------修改落庫DB");
 5         JSONObject json = new JSONObject();
 6         Map<String, String[]> webParaMap = request.getParameterMap();
 7 
 8         String dataArry[] = webParaMap.get("dataArr");// TODO parse to Object
 9         String prodName = webParaMap.get("prodName")[0];
10         String subProdName = webParaMap.get("subProdName")[0];
11         String userName = null;
12         if (null != SsoSession.getCurrentUser(request)) {
13             userName = SsoSession.getCurrentUser(request).getName();
14         }
15         //log.info("修改交易類型，id  = {}，名稱  = {},當前用戶 ={}", id, transName, userName);
16 
17         if (dataArry.length > 1) {
18             json.put("msg", "success"); 
19             return json;
20         } else {
21             json.put("msg", "fail"); 
22             return json;
23         }
24     }

好了，具體細節實現我就不說了，以上代碼花了一天時間純手工打磨調試，自己覺得效果還是可以的，呵呵；

如果你看了本文，有更好的想法和思路，可以留言給我，相互學習~

~希望可以幫助大家

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery實現ajax提交表單信息 jquery實現ajax提交表單的方法總結 Jquery ajax方式提交表單 jQuery ajax 提交表單圖片 jQuery ajax表單提交實現局部刷新 jQuery ajax表單提交實現局部刷新 ajaxSubmit 【jQuery】將form表單通過ajax實現無刷新提交 jquery實現ajax提交form表單的方法總結（轉） jQuery實現表單驗證及提交 Jquery通過Ajax方式來提交Form表單