“
槽糕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, 导致连续触发了两次!“
坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔，下期见。”

踩过的坑
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渲染，我们需要自己修改样式。如何修改？参考另一篇

<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 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>