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ā)，我的歸類是分2種層次，首先第一種是基于前端架構(gòu)上的開(kāi)發(fā)，有一些后臺(tái)開(kāi)發(fā)的同事會(huì)瞧不起搞前端的，他們認(rèn)為前端無(wú)非是畫個(gè)頁(yè)面嘛，這就有點(diǎn)夜郎自大了?，F(xiàn)在我了解的一些前端框架基本分為3個(gè)主流框架:ReactJs,Vue,angularjs,前兩個(gè)還是目前的主流趨勢(shì)。第二種就是基于市面上的一些非主流工具包，比如BUI，F(xiàn)LatUI等，再結(jié)合自己的dom操作。
好了，廢話不多說(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)用類型1和資金賬戶名稱橫向兩欄這塊，就稱為Div塊吧，第二個(gè)新增按鈕增加的是，資金賬戶名稱橫向一欄，稱為sonDiv塊吧。第二個(gè)費(fèi)用類型1和以下是新增出來(lái)的，所以顯示是刪除按鈕，同樣第二個(gè)資金賬戶名稱也是新增出來(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)品名稱</label>
<div class="controls">
<select id="prodName" name="prodName" class="input-normal data-messages="{required:'產(chǎn)品名稱'}" 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)品名稱</label>
<div class="controls">
<select id="subProdName" name="subProdName" class="input-normal data-messages="{required:'子產(chǎn)品名稱'}" 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)用類型1</label>
<div class="controls">
<select id="feeType1" name="feeType1" class="input-normal data-messages="{required:'費(fè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>資金賬戶名稱</label>
<div class="controls">
<select id="fundName" name="fundName" class="input-normal data-messages="{required:'資金賬戶名稱'}" 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>交易類型</label>
<div class="controls">
<select id="transType" name="transType" class="input-normal data-messages="{required:'交易類型'}" 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("交易類型--------------------修改落庫(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("修改交易類型，id = {}，名稱 = {},當(dāng)前用戶 ={}", 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)站的支持！
您可能感興趣的文章:
- jquery動(dòng)態(tài)改變form屬性提交表單
- JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
- jQuery動(dòng)態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
- jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
- jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作示例
- JQuery Ajax動(dòng)態(tài)生成Table表格
- 基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
- jQuery動(dòng)態(tài)操作表單示例【基于table表格】
相關(guān)文章
jquery offset函數(shù)應(yīng)用實(shí)例
點(diǎn)擊一個(gè)按鈕，然后在按鈕的下方顯示一個(gè)div,當(dāng)按鈕位于角落時(shí)，div的位置設(shè)定就需要調(diào)整，不然，div將顯示不完全.我打算使用offset()方法實(shí)現(xiàn)此功能2012-11-11
下面小編就為大家?guī)?lái)一篇解決JQuery全選/反選第二次失效的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了jquery圖片滾動(dòng)放大效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
關(guān)于jQuery里prev()的簡(jiǎn)單操作代碼
這篇文章主要介紹了jQuery里prev()的簡(jiǎn)單操作代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
zTree 樹(shù)插件實(shí)現(xiàn)全國(guó)五級(jí)地區(qū)點(diǎn)擊后加載的示例
下面小編就為大家分享一篇zTree 樹(shù)插件實(shí)現(xiàn)全國(guó)五級(jí)地區(qū)點(diǎn)擊后加載的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JQUERY 對(duì)象與DOM對(duì)象之兩者相互間的轉(zhuǎn)換
jquery對(duì)象的相應(yīng)方法DOM對(duì)象不能使用，而DOM對(duì)象的相應(yīng)方法jquery也不能使用。所以在具體項(xiàng)目中要注意Jquery對(duì)象與DOM對(duì)象的轉(zhuǎn)換問(wèn)題2009-04-04
jquery實(shí)現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁(yè)的示例
今天小編就為大家分享一篇jquery實(shí)現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁(yè)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
本篇文章為大家展示了如何在jquery中使用eq()方法，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲2015-01-01
JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式，通過(guò)jquery來(lái)實(shí)現(xiàn)，需要注意的是中間用逗號(hào)隔開(kāi)，感興趣的朋友可以參考下2013-08-08