站长资讯网Thinkphp是常见的PHP框架，layer则是一款好用的Web弹层组件，下面thinkphp教程栏目给大家介绍一下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]); } } }
