欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-20 23:34:29
对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了。现在我了解的一...

对于前端开发,我的归类是分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表单提交功能,希望对大家有所帮助