站长图库向大家介绍了Thinkphp+layer+ajax,如何完成增加方法等相关知识,希望对您有所帮助
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]); } }}