thinkphp-layui弹窗使用以及ajax提交含文件的表单

短命女 2022-05-23 03:35 98阅读 0赞

先提提我遇到的坑：在提交ajax表单后，控制器端已经将数据存到了数据库，也打印出了返回的json数据，但是ajax的success和  
error方法就是不执行，开始还以为是自己的代码有问题。

后来在layui的官网看了官方的案例程序，发现了这个：

//监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });

关键就在这个return false。

贴一下代码吧：

弹出层JS：用点击事件来触发这个addlesson（）

PS：上面的content是一个单独的页面，用链接来表示，也可以是一些文本内容。

![70][]

在弹出层中提交表单JS：

注意这里的：

parent.layer.closeAll();//调用父级的layer来关闭弹窗

贴一下表单的代码：

<form class="layui-form" action="" id="myform"  enctype="multipart/form-data" method="POST">
        <input type="number" name="teacherId" hidden value="{$Think.session.teacherid}">
        <div class="layui-form-item">
            <label class="layui-form-label">课程名</label>
            <div class="layui-input-block">
                <input type="text" name="lessonname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">课程类型</label>
            <div class="layui-input-block">
                <select name="tid" lay-filter="aihao">
                    <option value=""></option>
                    {volist name='type' id='vo'}
                    <option value="{$vo.tid}">{$vo.typename}</option>
                    {/volist}
                </select>
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">课程海报</label>
            <div class="layui-upload">
                <input type="file" name="pic" id="test20">
            </div>
        </div>
    
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">课程简介</label>
            <div class="layui-input-block">
                <textarea name="intro" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                
                
                <a href="javascript:;"><button class="layui-btn" οnclick="submitform()">立即提交</button></a>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

下面来贴一下没有文件的表单提交：

表单html：

JS:

layui.use(['form', 'layer','layedit', 'laydate','upload'], function(){
            var form = layui.form;
    
            form.on('submit(demo1)', function(data){
                $.ajax({
                    url:"{:url('index/commentadd')}",
                    method:'post',
                    data:data.field,
                    dataType:'JSON',
                    success:function(data){
                        if(data.status='0'){
                            layer.msg(data.msg,{icon:6});
                            location.href=location.href;//刷新页面
                        }
                        else
                            layer.msg(data.msg,{icon:5});
                    },
                    error:function (data) {
                        layer.msg(data.msg,{icon:5});
                    }
                })
                return false;
            });
        });

这里用的是官方给的方式提交，注意上面的demo1相关联的表单。

控制器中处理完数据后返回值：

if ($re){
       $date=[
              'status'=>0,
              'msg'=>'成功'
             ];
    }else{
       $date=[
              'status'=>1,
              'msg'=>'失败'
             ];
     }
     return json($date);

[70]: /images/20220523/bbe47849d1494d949afec3e41e04ca7e.png