-
form触发2次 layui_如何解决layui表单提交俩次
2020-12-30 10:49:10“槽糕layui表单会提交俩次,你遇到过吗?”前言使用这个layui已经快俩年时间了,刚刚新搭xadmin的框架,于是就出现了表单会重复提交这个问题,很懊恼啊!“如果你想直接知道解决方案,那就直接到第三小节即可。”一...“
槽糕layui表单会提交俩次,你遇到过吗?”
前言
使用这个layui已经快俩年时间了,刚刚新搭xadmin的框架,于是就出现了表单会重复提交这个问题,很懊恼啊!“
如果你想直接知道解决方案,那就直接到第三小节即可。”
一、起初操作
首先来看看咔咔都做了什么操作。
使用的xadmin模板,估计是没有把js文件引全面造成的问题。
咔咔想实现的效果如下图。
实现效果图一
实现效果图二
这是已经实现的效果,之前是没有的,就是因为加了这个玩意酿成的果。
不知道你们平时开发是怎么找代码的,咔咔是直接去代码库里边直接搜链接格式不正确。
下图就是咔咔搜索出来的结果,那么接下来就是引入这个js文件试试呗!
需要的js文件
于是拿起键盘就是干,将这个文件给引入进去
引入的js文件
以上就是酿成后果的原有!
二、问题重现
添加一条数据
添加数据
果然没让人失望,出现了俩条数据,哈哈!懵逼了
返回结果
三、解决问题
其实出现这个问题就是粗心大意造成了,还有就是对layui框架还是不熟悉。
解决方案就是将form这个js文件给干掉即可,是不是很搞笑,嗯呐!十分搞笑。
js文件
当你打开layui.js文件时就会恍然大悟
原来,layui.js自动所有包含了modules模块,我本地额外的引入了,所以会出现这样的情况。
layui.js文件
当然问题不仅仅是咔咔这种情况。
如果连续引用两次layui.all.js文件, 会导致连续触发两次, 或者先引用layui.all.js文件,然后在引用layui.js文件也会触发两次, 请细心检查自己引用的文件!!!
引用了layui.all.js文件之后, 再次引用了layui.js, 导致连续触发了两次!“
坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔,下期见。”
-
Layui表单提交问题
2021-01-30 17:31:35 在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据。如何解觉这一问题?以下给出我认为便捷的三种方法: 设置button的type=button,否则默认submit,就会重复提交 在监听...踩过的坑
1、Layui的form表单提交问题
在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据。如何解觉这一问题?以下给出我认为便捷的三种方法:
-
设置button的type=button,否则默认submit,就会重复提交
-
在监听提交的form.on里加上return flase
form.on("submit(formDemo)",function(data){ //do something return false; });
-
把button移出form表单
2、JQuery的ajax中data提交方式
在提交表单数据时,data通常使用键值对的方式提交数据。如
form.on('submit(formDemo)', function(data){ $.ajax({ //... data:{ uid:data.field.uid, password:data.field.password, }, //... }); return false; //防止表单的重复提交 });
但是如果遇到大量键值对,这样的方式不免繁琐。在此百度之后,总结出两种便捷提交方式:
-
直接传data.field
form.on('submit(formDemo)', function(data){ $.ajax({ //... data:data.field, //... }); return false; //防止表单的重复提交 });
-
利用formdata对象
form.on('submit(formDemo)', function(data){ var fd = new FormData(document.querySelector("form")); $.ajax({ //... data:fd, processData: false, //重要 contentType: false, //重要 //... }); return false; //防止表单的重复提交 });
后端接收数据
$data=Request::post(); //['key'=>'value',...]多个键值对的形式
至于为什么要加 processData: false和contentType: false, 这里给出查到的解释:
对于contentType参数,发起http请求时设置的请求头中的contentType。jQuery.ajax()默认的值为:
'application/x-www-form-urlencoded; charset=UTF-8',这个在大多数情况下都是适用的。
但经过测试,保持默认时会报错,因为发送的数据中有input type=“file”(上传文件),那么这时contentType应该设置为’multipart/form-data’,但如果指定为这个类型服务端(php)就会报这个错误: Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具体原因现在还不清楚,所以这里先将contentType设置为false,即不让jQuery设置contentType。
processData参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照'application/x-www-form-urlencoded'的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。
经过测试,如果保持默认(true)的话,在发起请求前js会报错: TypeError: ‘append’ called on an object that does not implement interface FormData.
另外还有个dataType参数,期望从服务器中返回的数据格式,这里最好也不要指定,而是让jquery自己根据http响应头中的contentType判断,然后返回一个合适的数据类型。指定后不会影响后台程序的逻辑处理,但你在前端接收的数据很可能不是期望的数据,于是js就会报这一类错误: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ,这个是将dataType指定为json后报的错误。
3、thinkPHP文件上传
文件上传是个大坑,这点我专门写了另外一篇
4、TP6自带分页
TP6自带分页官方文档写得比较详细,用起来也较为简单,挂个链接
美中不足的是,TP6默认采用BootStrap渲染,我们需要自己修改样式。如何修改?参考另一篇
-
-
layui 如何获取提交表单中input值
2019-05-14 17:58:26<form action="#" class="layui-form"> <div class="form_table"> <div class="form_header"> <span>账号/手机登录</span> </div> ...<form action="#" class="layui-form"> <div class="form_table"> <div class="form_header"> <span>账号/手机登录</span> </div> <div> <input class="login_input" type="text" placeholder="请输入用户名/手机登录" lay-verify="required|username" name="username"> <input class="password_input" type="password" placeholder="请输入登录密码" lay-verify="required|pass" name="password"> </div> <button id="btnSubmit" class="button_login layui-btn" lay-submit lay-filter="btnSubmit">登陆</button> </div> </form>
form.on('submit(btnSubmit)', function (data) { console.log(data) //当前容器的全部表单字段,名值对形式:{name: value} })
==>
-
layui表单提交之前如何通过jq增加子元素
2019-08-21 19:39:19以下拉框为例 ...div class="layui-input-inline"> <select lay-filter="platform_id" name="platform_id" lay-verify="required"> <option value=""></option> <option v...以下拉框为例
<div class="layui-input-inline"> <select lay-filter="platform_id" name="platform_id" lay-verify="required"> <option value=""></option> <option value="111" >111</option> </select> </div>
<div class="layui-input-inline"> <select name="pay_platform" lay-verify="required" id="isajaxed"> <option value="222">222</option> </select> </div>
<script>
var form = layui.form;
form.on('select(platform_id)', function(data) { var p_value = data.value; $.ajax({ url: "php文件接受",//最好与表单提交的方法分开 type: 'POST', dataType: 'json', data:{platform_id:p_value}, success: function(result) { $("#isajaxed").empty();//删除元素的子元素 var num = result.length; for (i = 0; i < num; i++) { console.log(result[i]); $("#isajaxed").append("<option value='"+result[i]+"'>"+result[i]+"</option>"); } renderForm(); //Layui重新刷新表单数据 } }); });
function renderForm(){ layui.use('form', function(){ var form = layui.form; form.render(); }); }
</script>
-
layui之表单提交到服务器数据库
2019-11-22 14:06:02前几天完成了layui中的图片上传,表单部分就剩下如何提交到数据库了。 说实话,sham又再这个问题上困住了好久,最后好不容易搞定了,赶紧来记录备忘下。 首先是html部分代码 <form class="layui-form" action... -
layui 横向表单_layui如何抓取表单数据?
2020-12-20 10:06:33layui如何抓取表单数据?本篇文章给大家介绍一下layui 表单抓取数据四步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。注意事项:1、layui 中提交按钮是基于“监听”机制实现的。2、form.on... -
layui清空表单数据_layui如何清除表单数据
2021-01-13 23:37:05Layui清除表单数据的方法:首先,创建一个表单数据;...Layui清空并重置表单数据最近,使用layui框架,在提交页面上的表单数据后,如果页面上的表单数据被清空,有以下几种方法表单:& ltform class = & qu... -
Layui Form 如何主动验证表单是否通过
2020-07-22 10:01:41Layui Form 如何主动验证表单是否通过 最近使用Layui Form时遇到一个问题,layui的form 好像只能通过submit来触发表单的验证,当没有submit时就没法进行验证和阻止提交。 于是扩展了一下form.js, 代码如下: ... -
from 表单checkbox不选中是否会提交_LayUI表单事件监听及初始化赋值
2021-02-03 12:12:24在js中对元素界面操作主要是学习给标签添加样式,在内置模块中主要是学习如何引用模块,对标签的行为操作一、更新渲染因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的,而是自己书写标签... -
layui防止表单多次提交
2020-04-24 15:37:51如何禁用layer.confirm的提交按钮 防止多次点击触发ajax请求生成一条记录信息 在项目提测后,测试都会提出一个bug,那就是提交按钮多次点击,会同时生成很多相同数据。我是这样做的:首先浏览layui的 弹层组件文档,... -
layui form表单下的button按钮会自动提交表单的问题以及解决方案
2019-03-22 15:41:52layui表单自动提交问题 最近使用layui的表单提交时,遇到了这个问题:在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题,很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧... -
Python django搭建layui提交表单,表格,图标的实例
2020-12-31 21:50:14layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 注:忽略创建项目,配置文件,若这部分内容不太明白,... -
layui中如果button按钮在form表单外面如何提交
2020-02-27 11:01:50form class="layui-form" lay-filter="addForm" method="" action=""> <button class="submit disliay-n" lay-submit lay-filter="add">确定</button> </form> <... -
form layui 同时提交多个对象_一个表单同时提交多条记录
2020-12-19 04:00:39问题背景:我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC,前端HTML和SpringMVC Controller里该如何处理?第1种方法:表单提交,以字段数组接收;第2种方法:表单提交,以BeanListModel接收;第3种... -
TP后台上传图片结合Layui的ajax提交
2019-01-14 17:26:31初次接触TP3.2的框架,一步步慢慢的摸索,今天接到的需求是给一个表单中增加图片上传功能,原本以为只要有上传图片的方法,这...可能有点拗口,总之问题出在前台提交的时候,如何将当前这条数据的id附加到数据中,一... -
利用Python django搭建layui提交表单,表格,图标
2018-06-26 11:08:41layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 -
先通过 layui 进行表单验证 ,验证通过后使用ajax提交表单
2020-08-20 05:08:38使用 layui-verify 验证 表单选项 , 如果不满足则停留在此页面 , 不进行表单提交 。 如果表单验证通过 ,通过ajax对表单进行相应操作。 二、效果图 三、如何使用 ? 示例 : 表单 <form class="layui-form" ... -
layui 多表单验证
2020-11-27 14:42:16最近在用layui表单form组件时,发现一个问题、那就是如果页面中有多个form表单的话如何,进行提交时如何实现即不用自己一个一个的写js验证。又可以用layui知道的form组件。有需求,那就开搞吧。 正文 先看效果 这里... -
layui中文件如何在表单里上传
2018-08-17 15:39:14故此只需要将其模块中的提交去掉,从而用ajax来提交formDate表单就可以了。 这是一段上传文件的代码 html代码 <form class="layui-form" action="#" enctype="multipart/form-... -
layui数据表格异步加载、显示模态窗口、表单异步提交、数据表格重载 ,它们如何协调工作的
2019-10-26 20:00:44在模态窗口的表单输入数据,点击【确定】,异步提交表单,并关闭模态窗口,同时实现数据表格的重新加载 这些如何实现呢,在thinphp5中,我们一般为分两个页面 首先看显示数据表格的页面 <!DOCTYPE html> &... -
layui table 弹出层刷新_求助 - layui的数据表格利用弹出窗体表单修改数改之后表格如何更新...
2020-12-23 16:26:581### 问题描述开发一个模块,用到了layui的数据表格, 绑定数据表格工具条之后需要使用layui弹出层弹出一个表单来修改某个条目的各种数据,请问在表带提交修改完成之后,如何刷新对应条目在数据表格中的值呢?... -
萌新提问,在Layui弹出层里如何实现可以执行图片上传的表单,请大佬们赐教
2019-03-25 22:01:26新手刚开始接触Layui,想在弹出层里实现表单提交,但是图片上传的button按钮在弹出层里点击了没什么反应,请问大佬们该如何解决?可以的话,麻烦分享下代码,感激不尽! -
如何解决layui重复弹出框_Springboot 2.x 如何解决重复提交 (本地锁的实践)
2020-12-03 02:52:07有没有遇到过这种情况:网页响应很慢,提交一次表单后发现没反应,然后你就疯狂点击提交按钮(12306就经常被这样怒怼),如果做过防重复提交还好,否则那是什么级别的灾难就不好说了。。。本文主要是应用 自定义注解... -
layui Form undefined原因
2020-11-26 10:58:31form表单通过form.on(submit())方式获取值得时候,如何控制台提示form undefined,并且取值失败,原因可能是 提交按钮没有放到form表单里面,放到外面点击提交获取值就会失败。 -
layui 使用问题合集(asp.net后台)
2020-03-02 20:59:54form表单提交后页面出现迅速刷新问题 出现这个问题请先检查你是否使用了标签,如果使用了,将form标签换成div标签即可。参考博客 个人感觉(我也是个小学弟),layui前端的构建要按照文档来做,尽量都用div标签。 ...
-
随机电磁光束阵列的光束传输变换特性
-
原生Ajax
-
js中this指向
-
SAM模式:构建函数响应式前端架构过程中学到的经验
-
Liunx 优化思路与实操步骤
-
084_可直接用于项目的qt窗口(桑原创).rar
-
Python启蒙到架构师的核心技术精讲课程
-
settings.zip
-
tcp传输
-
健康生活起居
-
克服范式,达成真正的敏捷
-
USB驱动Demo安装文档
-
2020天猫国货食品趋势洞察报告.pdf
-
SILEX-I超短脉冲激光装置放大前级输出能量稳定性提升
-
OTL用于多目标优化的比较研究
-
华工信号与系统真题与详解.zip
-
Monkey_test.zip
-
测控电路课设报告.docx
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
33-docker学习笔记.docx