Thinkphp+layer+ajax如何完成增加方法（附代码示例）

3242022-03-20 23:26:42

Thinkphp是常见的PHP框架，layer则是一款好用的Web弹层组件，下面给大家介绍一下Thinkphp如何结合layer弹窗，再加ajax来完成增加方法。

Thinkphp结合layer弹窗加ajax完成增加方法

给每个input框绑定id就行了

这是前端页面

<!DOCTYPE html>
<html>  
<head>
    {include file="public/head" title="顶部开始" /}
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
   
<body>
    <p class="x-body layui-anim layui-anim-up">
        <form action="" method="post" class="layui-form">
            <p class="layui-form-item">
                <label for="L_email" class="layui-form-label"><span class="x-red">*</span>管理员名称</label>
                <p class="layui-input-inline">
                    <input type="text"  name="name" class="layui-input" id="name">//绑定ld
                </p>
                <p class="layui-form-mid layui-word-aux">
                </p>
            </p>
            <p class="layui-form-item">
                <label for="L_username" class="layui-form-label"><span class="x-red">*</span>手机号码</label>
                <p class="layui-input-inline">
                    <input type="text"  name="phone" class="layui-input" id="phone">//绑定ld
                </p>
            </p>
            <p class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>请选择权限</label>
                <p class="layui-input-block" style="width:34%;">
                    <select name="type" lay-verify="required" id="type">
                        <option value=""></option>
                        <option value="1">超级管理员</option>
                        <option value="0">普通操作员</option>
                    </select>
                </p>
            </p>          
            <p class="layui-form-item">
                <label for="L_pass" class="layui-form-label"><span class="x-red">*</span>密码</label>
                <p class="layui-input-inline">
                    <input type="password"  name="pass" class="layui-input" id="pass">//绑定ld
                </p>
                <p class="layui-form-mid layui-word-aux">6到16个字符</p>
            </p>
            <p class="layui-form-item">
                <label for="L_repass" class="layui-form-label"><span class="x-red">*</span>确认密码</label>
                <p class="layui-input-inline">
                    <input type="password"  name="pass" class="layui-input" id="pass2">
                </p>
            </p>
            <p class="layui-form-item" >
                <label class="layui-form-label"><span class="x-red">*</span>性别</label>
                <p class="layui-input-block"  >
                    <input type="radio" name="sex" value="1" title="男"  id="sex" checked="">//绑定ld
                    <input type="radio" name="sex" value="2" title="女" id="sex">//绑定ld
                </p>
            </p>       
            <p class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <a href="javascript:;" id='confirm' class="layui-btn" >立即提交</a>//绑定事件，触发confirm方法
            </p>
        </form>
    </p>
    <script>$("#confirm").click(function(){
        var name   = $.trim($('#name').val());
        var phone  = $.trim($('#phone').val()); 
        var type  = $.trim($('#type').val()); 
        var pass  = $.trim($('#pass').val());                                       //先var
        var pass2  = $.trim($('#pass2').val()); 
        var sex  = $.trim($('#sex').val()); 
        var index=parent.layer.getFrameIndex(window.name);  
       
        if(name==''){
            layer.msg('请输入管理员名称', {icon: 0});
            return false;
        }
        if(phone==''){
            layer.msg('请输入手机号码', {icon: 0});
            return false;
        }
        if(type==''){
            layer.msg('请选择权限', {icon: 0});
            return false;
        }
        if(pass==''){
            layer.msg('请输入密码', {icon: 0});
            return false;
        }    
        if(pass!=pass2){
          layer.msg('两次密码不一致', {icon: 0});
          $('#pass').val("").focus(); 
          $('#pass2').val("").focus();
          return false;
        } 
     
        $.ajax({
                url:"{:url('user_add')}",  //这里跳到后台控制器
                data:{name:name,phone:phone,type:type,pass:pass,sex:sex},  //注意这里一一对应要传的参数
                type:"POST",
                success: function(data){
                    if (data.status==1) {
                      layer.msg('添加成功！',{time:1000,icon: 1},function(){
                        window.parent.location.reload();
                        parent.layer.close(index);     //添加成功之后销毁当前弹窗
                      })   
     
                    }else{
                        layer.msg(data.info,{time:2000,icon: data.status});
                    }
                }
            });   
        });
    </script>
</body>
</html>

这里是控制器部分

public function user_add(){
    $time = time();
    if(Request::instance()->isAjax()){
        $name=Db::table('shop_admin')->where(['name'=>input('post.name')])->count();
        if($name >=1){
            return json(["info"=>"该用户名已被占用!","status"=>0]);
        }
        $res = Db::table('shop_admin')->
        insert([
                'name'=>input('post.name'),
                'phone'=>input('post.phone'),
                'type'=>input('post.type'),
                'password'=>md5(input('post.pass')),
                'sex'=>input('post.sex'),
                'time'=> $time                   ]);
        if($res){
            return json(["info"=>"添加成功！","status"=>1,"url"=>url('user/index')]);
        }else{
            return json(["info"=>"注册失败!","status"=>5]);
        }
    }
}