解决Layui 表单提交数据为空的问题


Posted in Javascript onAugust 15, 2018

坑的外观

最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的。

今天踩了个坑,就是使用layui表单提交时,提交的数据为空。

例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象。

<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="请输入标题" autocomplete="off" class="layui-input">
  </div>
 </div>
</form>

layui.use('form', function(){
 var form = layui.form;

 //监听提交
 form.on('submit(formDemo)', function(data){
  layer.msg(JSON.stringify(data.field));//此处显示输入内容
  return false;
 });
});

坑的原因

想了半天都没弄明白,最后仔细对比了示例源码和自己的代码,原来是人家Layui提交表单时是按元素的name和value准备数据的,而我为了使用jQuey处理元素方便,把name改为id。

就是这个:<input type="text" id="title"

改为<input type="text" id="title" name="title"后,问题解决。

以上这篇解决Layui 表单提交数据为空的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
js控制table合并具体实现
Feb 20 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
jQuery轮播图实例详解
Aug 15 #jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 #Javascript
对layui中表单元素的使用详解
Aug 15 #Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
vue生命周期实例小结
Aug 15 #Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
layui radio性别单选框赋值方法
Aug 15 #Javascript
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
jquery批量控制form禁用的代码
2013/08/06 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
从vue源码看props的用法
2019/01/09 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python实现基于SVM手写数字识别功能
2020/05/27 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
浅析NumPy 切片和索引
2020/09/02 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
物流经理自我评价
2013/09/23 职场文书
应届生会计求职信
2013/11/11 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
股东合作协议书
2014/09/12 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
学校师德师风整改方案
2014/10/28 职场文书