站長資訊網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]); } } }
