解决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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery实现下载图片功能
Jul 18 jQuery
Vue3 源码导读(推荐)
Oct 14 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP 已经成熟
2006/12/04 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python使用minidom读写xml的方法
2015/06/03 Python
numpy中矩阵合并的实例
2018/06/15 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
2014学雷锋活动总结
2014/03/09 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
新闻通讯稿范文
2015/07/22 职场文书
小学语文教学随笔
2015/08/14 职场文书
《窃读记》教学反思
2016/02/18 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers