layui的坑之form表单提交

先说一下作者遇到的问题，本地开发测试都可以完美运行，一到线上就开始 ajax 请求浏览器给 cancel，虽然这个请求 cancel 了，但是 controller 里的代码执行了

控制器代码：

public function edit_index_article(){$old_id = $_POST['old_id'];
        // 加上新的
        $id = intval($_POST['new_id']);
        $sort = intval($_POST['sort']);
        // 验证问题 ID
        $q = DB::table('article')
            ->select('id')
            ->where(['id'=>$id])
            ->first();
        if(!$q){die(json_encode(['code'=>400,'msg'=>'']));
        }
            $this->redis->zRem($this->home_community_key,$old_id);
        // 添加问题
        $a = $this->redis->zAdd($this->home_community_key,$sort,$id.'-a');
        die(json_encode(['code'=>200,'msg'=>'']));

    }

表单代码：

    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="radio" name="status" value="2" title="问题" lay-filter="count-type" <?php if($status == 2){?>     checked="checked"  <?php} ?> >
                <input type="radio" name="status" value="1" title="文章" lay-filter="count-type"<?php if($status == 1){?>     checked="checked"  <?php} ?> >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type=""name="add_article_id"value="{{intval($id)}}"id="add_article_id"lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"> 排序 </label>
            <div class="layui-input-inline">
                <input type=""name="sort"id="sort"lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <center> <button class="layui-btn layui-btn-primary" onclick="add_comm('{{$id}}')" > 确定 </button></center>
    </form>

    <script>
        layui.use(['form'], function(){
            var $ = layui.jquery
            var form = layui.form;
            $.ajaxSetup({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        function add_comm(id) {var status =  $("input[name='status']:checked").val()
            var add_article_id = $('#add_article_id').val();
            var sort = $('#sort').val();
            var reg=/^[1-9]\d*$/;
            if(reg.test(sort)!==true){alert("请输入非零的正整数");
                return false;
            }
            if(status ==1){
                $.ajax({
                        type: "post",
                        url: "/Course/edit_index_article",
                        data: {
                            'old_id':id,
                            'new_id':add_article_id,
                            'sort':sort
                        },
                    dataType: 'json',
                        success: function (result) {if(result['code'] == 400){alert('没有该帖子');
                                return false;
                            }
                            if(result['code'] == 200){layer.msg('添加成功, 马上刷新页面');

                                parent.layer.closeAll()
                                window.parent.location.href = '/community/index?page_type=5';
                            }
                        }

                    }
                );
                return false;
            }
            if(status == 2){
                $.ajax({
                        type: "post",
                        url: "/Course/edit_index_question",
                        async: false,
                        data: {
                            'old_question_id':id,
                            'new_question_id':add_article_id,
                            'sort':sort
                        },
                    dataType: 'json',
                        success: function (result) {if(result['code'] == 400){alert('没有该帖子');
                                return false;
                            }
                            if(result['code'] == 200){layer.msg('修改成功, 马上刷新页面');
                                parent.layer.closeAll()
                                window.parent.location.href = '/community/index?page_type=5';
                            }
                        }
                    }
                );
                return false;
            }

        }
    </script>

开始 debug，由于数据更新成功，怀疑代码执行到 ajaxreturn 返回状态码挂了，修改返回格式，失败。然后怀疑是浏览器插件自动取消请求，缓存问题，都不是。
产生问题的原因：
在本地运行上边的代码的时候，控制台会有报错，并且会有两个请求如下图：

这里有两个请求一个成功了，一个取消了，并且是我们需要的那个请求成功了，经过排查， 第二个请求是 layui 框架使用 form 表单后，框架本身会自动给提交表单的数据。 我们并不需要这个请求，一到线上，这个请求失败导致 ajax 的请求也失败。
解决办法：
<form class=”layui-form” onsubmit=”return false”>
给 form 表单添加阻止表单提交的属性。