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

