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


Posted in jQuery onJune 08, 2018

对于前端开发,我的归类是分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表单提交功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
js字符编码函数区别分析
2011/12/28 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python3实现逐字输出的方法
2019/01/23 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
pandas分区间,算频率的实例
2019/07/04 Python
党校自我鉴定范文
2013/10/02 职场文书
上班离岗检讨书
2014/01/27 职场文书
cf收人广告词大全
2014/03/14 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
介绍信格式样本
2015/05/05 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript