解決Layui 表單提交數(shù)據(jù)為空的問題
坑的外觀
最近用了一段時(shí)間Layui作為項(xiàng)目后臺管理模塊的前端框架,感覺還是挺好用的。
今天踩了個(gè)坑,就是使用layui表單提交時(shí),提交的數(shù)據(jù)為空。
例如,layer.msg(JSON.stringify(data.field));這句代碼執(zhí)行后,頁面顯示為空對象。
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">輸入框</label>
<div class="layui-input-block">
<input type="text" id="title" required lay-verify="required" placeholder="請輸入標(biāo)題" autocomplete="off" class="layui-input">
</div>
</div>
</form>
layui.use('form', function(){
var form = layui.form;
//監(jiān)聽提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));//此處顯示輸入內(nèi)容
return false;
});
});
坑的原因
想了半天都沒弄明白,最后仔細(xì)對比了示例源碼和自己的代碼,原來是人家Layui提交表單時(shí)是按元素的name和value準(zhǔn)備數(shù)據(jù)的,而我為了使用jQuey處理元素方便,把name改為id。
就是這個(gè):<input type="text" id="title"
改為<input type="text" id="title" name="title"后,問題解決。
以上這篇解決Layui 表單提交數(shù)據(jù)為空的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在table中插入多行的js代碼(與insertAdjacentHTML相似的功能)
在table中插入多行,能使用與insertAdjacentHTML相似的功能2010-06-06
在web中js實(shí)現(xiàn)類似excel的表格控件
這篇文章主要介紹了如何在web中實(shí)現(xiàn)類似excel的表格控件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
JavaScript循環(huán)遍歷的24個(gè)方法,你都知道嗎
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)遍歷的24個(gè)方法,文中對每種方法都給出了詳細(xì)的實(shí)例代碼,方便大家理解學(xué)習(xí),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
JavaScript利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載
當(dāng)我們請求好第一頁數(shù)據(jù)后,將請求下一頁放到異步任務(wù)隊(duì)列里(宏任務(wù)或者微任務(wù)),等當(dāng)前同步任務(wù)執(zhí)行完成后,立馬請求下一頁數(shù)據(jù),本文給大家介紹了JavaScript如何利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載,需要的朋友可以參考下2024-05-05
JS中split()用法(將字符串按指定符號分割成數(shù)組)
這篇文章主要介紹了JS中split()用法(將字符串按指定符號分割成數(shù)組)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10

