精华内容
下载资源
问答
  • “槽糕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}
    
                })
    

    ==>在这里插入图片描述

    展开全文
  • 以下拉框为例 ...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 表单抓取数据四步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。注意事项:1、layui提交按钮是基于“监听”机制实现的。2、form.on...
  • Layui清除表单数据的方法:首先,创建一个表单数据;...Layui清空并重置表单数据最近,使用layui框架,在提交页面上的表单数据后,如果页面上的表单数据被清空,有以下几种方法表单:& ltform class = & qu...
  • Layui Form 如何主动验证表单是否通过

    千次阅读 2020-07-22 10:01:41
    Layui Form 如何主动验证表单是否通过 最近使用Layui Form时遇到一个问题,layui的form 好像只能通过submit来触发表单的验证,当没有submit时就没法进行验证和阻止提交。 于是扩展了一下form.js, 代码如下: ...
  • 在js中对元素界面操作主要是学习给标签添加样式,在内置模块中主要是学习如何引用模块,对标签的行为操作一、更新渲染因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的,而是自己书写标签...
  • 如何禁用layer.confirm的提交按钮 防止多次点击触发ajax请求生成一条记录信息 在项目提测后,测试都会提出一个bug,那就是提交按钮多次点击,会同时生成很多相同数据。我是这样做的:首先浏览layui的 弹层组件文档,...
  • layui表单自动提交问题 最近使用layui的表单提交时,遇到了这个问题:在form内的按钮总是会自动提交。 而按钮放在form外面就不会出现这种问题,很让人头痛。 下面让我们来看看如何解决form内按钮自动提交问题的吧...
  • layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 注:忽略创建项目,配置文件,若这部分内容不太明白,...
  • form class="layui-form" lay-filter="addForm" method="" action=""> <button class="submit disliay-n" lay-submit lay-filter="add">确定</button> </form> <...
  • 问题背景:我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC,前端HTML和SpringMVC Controller里该如何处理?第1种方法:表单提交,以字段数组接收;第2种方法:表单提交,以BeanListModel接收;第3种...
  • 初次接触TP3.2的框架,一步步慢慢的摸索,今天接到的需求是给一个表单中增加图片上传功能,原本以为只要有上传图片的方法,这...可能有点拗口,总之问题出在前台提交的时候,如何将当前这条数据的id附加到数据中,一...
  • layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格
  • 使用 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代码 &lt;form class="layui-form" action="#" enctype="multipart/form-...
  • 在模态窗口的表单输入数据,点击【确定】,异步提交表单,并关闭模态窗口,同时实现数据表格的重新加载 这些如何实现呢,在thinphp5中,我们一般为分两个页面 首先看显示数据表格的页面 <!DOCTYPE html> &...
  • 1### 问题描述开发一个模块,用到了layui的数据表格, 绑定数据表格工具条之后需要使用layui弹出层弹出一个表单来修改某个条目的各种数据,请问在表带提交修改完成之后,如何刷新对应条目在数据表格中的值呢?...
  • 新手刚开始接触Layui,想在弹出层里实现表单提交,但是图片上传的button按钮在弹出层里点击了没什么反应,请问大佬们该如何解决?可以的话,麻烦分享下代码,感激不尽!
  • 有没有遇到过这种情况:网页响应很慢,提交一次表单后发现没反应,然后你就疯狂点击提交按钮(12306就经常被这样怒怼),如果做过防重复提交还好,否则那是什么级别的灾难就不好说了。。。本文主要是应用 自定义注解...
  • layui Form undefined原因

    2020-11-26 10:58:31
    form表单通过form.on(submit())方式获取值得时候,如何控制台提示form undefined,并且取值失败,原因可能是 提交按钮没有放到form表单里面,放到外面点击提交获取值就会失败。
  • form表单提交后页面出现迅速刷新问题 出现这个问题请先检查你是否使用了标签,如果使用了,将form标签换成div标签即可。参考博客 个人感觉(我也是个小学弟),layui前端的构建要按照文档来做,尽量都用div标签。 ...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

layui表单如何提交