當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ajax form表单提交_LayUI提交表单，监听select，分页组件

發(fā)布時(shí)間：2024/10/8 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax form表单提交_LayUI提交表单，监听select，分页组件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、LayUI提交表單

這幾天做項(xiàng)目，用到提交layui框架的彈出層的表單，因?yàn)樾枰谔峤槐韱魏?#xff0c;關(guān)閉當(dāng)前彈出層，同時(shí)刷新父窗口的數(shù)據(jù)，因此，用普通的提交就不行了，因?yàn)槠胀ǖ奶峤坏胶笈_(tái)之后沒有返回值，就無法做到關(guān)閉彈出層和刷新父窗口。找了很多方法，包括查看api，找異步提交方法等，都沒有找到合適的方法(也許是我太笨)，最后，在小伙伴的幫助下，終于找到了一個(gè)好用的方法。在此，對(duì)我的小伙伴表示衷心的感謝！

1.1、js文件

jquery.js、layui.js、layer.js

1.2、jsp頁面

提交

表單之間就是各種輸入框，這個(gè)大家都懂的，提交按鈕一定要是button，不能是input，否則表單監(jiān)聽不到提交事件，還有一個(gè)要特別注意的地方：由于后臺(tái)使用Springmvc接收對(duì)象，所以前臺(tái)往后臺(tái)傳值的時(shí)候，json數(shù)據(jù)中不能有值為空字符串，或值為null的數(shù)據(jù)，因此，在往后臺(tái)傳值前，需要將表單序列化后的數(shù)據(jù)中，值為空的屬性給剔除。

1.3、js代碼

layui.use(['form','layedit','laydate'],function(){ var form=layui.form ,layer=layui.layer; //監(jiān)聽提交 form.on('submit(demo1)',function(data){ //獲取表單序列化數(shù)據(jù)，并將序列化數(shù)據(jù)轉(zhuǎn)換為json對(duì)象 var params=paramString2obj($('#helpobject_form').serialize()); $.ajax({ type:'post', url:'', contentType:'application/json', cache:false, data:JSON.stringify(params), dataType:'json', success:function(data){ if(null!=data){ if(data=='success'){ layer.msg('添加成功',{icon:1,time:2000},function(){ var index=parent.layer.getFrameIndex(window.name); parent.layer.close(index); window.parent.location.reload();//刷新父窗口 }); }else{ layer.msg('添加失敗'); } } }, error:function(data){ layer.alert(JSON.stringify(data)); } }); return false; });});/*serializedParams格式為"key1=value1&key2=value2".也支持'key.sonkey=value' */function paramString2obj (serializedParams) { var obj={}; function evalThem (str) { var strAry = new Array(); strAry = str.split("="); //使用decodeURIComponent解析uri 組件編碼 for(var i = 0; i < strAry.length; i++){ strAry[i] = decodeURIComponent(strAry[i]); } var attributeName = strAry[0]; var attributeValue = strAry[1].trim(); //如果值中包含"="符號(hào)，需要合并值 if(strAry.length > 2){ for(var i = 2;i attributeValue += "="+strAry[i].trim(); } } if(!attributeValue){ return ; } var attriNames = attributeName.split("."), curObj = obj; for(var i = 0; i < (attriNames.length - 1); i++){ curObj[attriNames[i]]?"":(curObj[attriNames[i]] = {}); curObj = curObj[attriNames[i]]; } //使用賦值方式obj[attributeName] = attributeValue.trim();替換 //eval("obj."+attributeName+"=\""+attributeValue.trim()+"\";"); //解決值attributeValue中包含單引號(hào)、雙引號(hào)時(shí)無法處理的問題 curObj[attriNames[i]] = attributeValue.trim(); }; var properties = serializedParams.split("&"); for (var i = 0; i < properties.length; i++) { //處理每一個(gè)鍵值對(duì) evalThem(properties[i]); }; return obj;}

1.4、改進(jìn)

上面的代碼中的序列化form表單的方法有一個(gè)bug，那就是會(huì)把部分空格給序列化成"+"號(hào)，于是又找了另外一種方法。

//監(jiān)聽表單提交form.on('submit(demo1)',function(data){ var params=deleteEmptyProperty($('#dynamic_form').formatForm()); $.ajax({ type:'post', url:'', contentType:'application/json', cache:false, data:JSON.stringify(params), dataType:'json', success:function(data){}, error:function(data){} }); return false;});//刪除json對(duì)象中的屬性值為空字符串、null、undefined的屬性// 支持遞歸刪除，即有些空屬性是由于代碼執(zhí)行中產(chǎn)生的，這些屬性也要?jiǎng)h除function deleteEmptyProperty(object){ for (var i in object) { var value = object[i]; // sodino.com // console.log('typeof object[' + i + ']', (typeof value)); if (typeof value === 'object') { if (Array.isArray(value)) { if (value.length == 0) { delete object[i]; console.log('delete Array', i); continue; } } deleteEmptyProperty(value); if (isEmpty(value)) { console.log('isEmpty true', i, value); delete object[i]; console.log('delete a empty object'); } } else { if (value === '' || value === null || value === undefined) { delete object[i]; console.log('delete ', i); } else { console.log('check ', i, value); } } } return object;}function isEmpty(object) { for (var name in object) { return false; } return true;}//序列化表單jQuery.prototype.formatForm=function(){ var obj=new Object(); $.each(this.serializeArray(),function(index,param){ if(!(param.name in obj)){ obj[param.name]=param.value; } }); return obj;};

2、LayUI監(jiān)聽select

在html中用到select都會(huì)用到它的change事件，在普通的select中，要監(jiān)聽select的change事件，直接在js代碼中監(jiān)聽就可以了，這個(gè)so easy！

我要說的是layui框架里面的select的change事件的監(jiān)聽，layui框架里面的select的change事件的監(jiān)聽用監(jiān)聽普通select的change事件的方法是行不通的，不信？你試試！！！

下面，說說layui框架里面的select的change事件的監(jiān)聽。

2.1、js文件

jquery.js、layui.js

2.2、jsp頁面

2.3、js代碼

layui.use('form', function(){var form = layui.form;//監(jiān)聽select的改變事件form.on('select(privince)', function(data){ //選擇省，去查詢城市列表 getLocationList(data.value,"nativePlaceCityId"); //重新渲染表單 layui.form.render();})

其中privince是layui中給select定義的一個(gè)屬性lay-filter="privince"，

通過這種方法就可以監(jiān)聽到select值的變化，data代表默認(rèn)選中的那個(gè)option，data.value就是select改變后的值。

使用select的最具代表性的操作，就是省市聯(lián)動(dòng)的級(jí)聯(lián)操作，選擇省之后，動(dòng)態(tài)加載當(dāng)前選擇省對(duì)應(yīng)的市的列表。

通過ajax獲取市的列表并將值添加到select標(biāo)簽的做法和普通select操作方法一致，但是在將option添加給select完成后，要特別注意的是需要對(duì)表單整體重新渲染：

layui.form.render();

其中render可以指定對(duì)應(yīng)的form的屬性lay-filter值。

3、LayUI分頁組件

3.1、layui的js文件