form表单提交

发表于 | 分类于 | | 阅读数 
☺

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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'=>'']));

    }

表单代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<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表单里边如果包含button按钮的话，并且按钮没有指定type的时候，会默认submit，提交form表单！！！！
解决办法：
给button按钮添加type=”button”

给form表单添加阻止表单提交的属性。