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

 

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

给每个input框绑定id就行了

这是前端页面

  1. <!DOCTYPE html>
  2. <html>  
  3. <head>
  4.     {include file=”public/head” title=”顶部开始” /}
  5.     <!– 让IE8/9支持媒体查询，从而兼容栅格 –>
  6.     <!–[if lt IE 9]>
  7.     <script src=”https://cdn.staticfile.org/html5shiv/r29/html5.min.js”></script>
  8.     <script src=”https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js”></script>
  9.     <![endif]–>
  10. </head>
  11.    
  12. <body>
  13.     <p class=“x-body layui-anim layui-anim-up”>
  14.         <form action=“” method=“post” class=“layui-form”>
  15.             <p class=“layui-form-item”>
  16.                 <label for=“L_email” class=“layui-form-label”><span class=“x-red”>*</span>管理员名称</label>
  17.                 <p class=“layui-input-inline”>
  18.                     <input type=“text”  name=“name” class=“layui-input” id=“name”>//绑定ld
  19.                 </p>
  20.                 <p class=“layui-form-mid layui-word-aux”>
  21.                 </p>
  22.             </p>
  23.             <p class=“layui-form-item”>
  24.                 <label for=“L_username” class=“layui-form-label”><span class=“x-red”>*</span>手机号码</label>
  25.                 <p class=“layui-input-inline”>
  26.                     <input type=“text”  name=“phone” class=“layui-input” id=“phone”>//绑定ld
  27.                 </p>
  28.             </p>
  29.             <p class=“layui-form-item”>
  30.                 <label class=“layui-form-label”><span class=“x-red”>*</span>请选择权限</label>
  31.                 <p class=“layui-input-block” style=“width:34%;“>
  32.                     <select name=“type” lay-verify=“required” id=“type”>
  33.                         <option value=“”></option>
  34.                         <option value=“1”>超级管理员</option>
  35.                         <option value=“0”>普通操作员</option>
  36.                     </select>
  37.                 </p>
  38.             </p>          
  39.             <p class=“layui-form-item”>
  40.                 <label for=“L_pass” class=“layui-form-label”><span class=“x-red”>*</span>密码</label>
  41.                 <p class=“layui-input-inline”>
  42.                     <input type=“password”  name=“pass” class=“layui-input” id=“pass”>//绑定ld
  43.                 </p>
  44.                 <p class=“layui-form-mid layui-word-aux”>6到16个字符</p>
  45.             </p>
  46.             <p class=“layui-form-item”>
  47.                 <label for=“L_repass” class=“layui-form-label”><span class=“x-red”>*</span>确认密码</label>
  48.                 <p class=“layui-input-inline”>
  49.                     <input type=“password”  name=“pass” class=“layui-input” id=“pass2”>
  50.                 </p>
  51.             </p>
  52.             <p class=“layui-form-item” >
  53.                 <label class=“layui-form-label”><span class=“x-red”>*</span>性别</label>
  54.                 <p class=“layui-input-block”  >
  55.                     <input type=“radio” name=“sex” value=“1” title=“男”  id=“sex” checked=“”>//绑定ld
  56.                     <input type=“radio” name=“sex” value=“2” title=“女” id=“sex”>//绑定ld
  57.                 </p>
  58.             </p>       
  59.             <p class=“layui-form-item”>
  60.                 <label for=“L_repass” class=“layui-form-label”></label>
  61.                 <a href=“javascript:;” id=‘confirm’ class=“layui-btn” >立即提交</a>//绑定事件，触发confirm方法
  62.             </p>
  63.         </form>
  64.     </p>
  65.     <script>$(“#confirm”).click(function(){
  66.         var name   = $.trim($(‘#name’).val());
  67.         var phone  = $.trim($(‘#phone’).val()); 
  68.         var type  = $.trim($(‘#type’).val()); 
  69.         var pass  = $.trim($(‘#pass’).val());                                       //先var
  70.         var pass2  = $.trim($(‘#pass2’).val()); 
  71.         var sex  = $.trim($(‘#sex’).val()); 
  72.         var index=parent.layer.getFrameIndex(window.name);  
  73.        
  74.         if(name==”){
  75.             layer.msg(‘请输入管理员名称’, {icon: 0});
  76.             return false;
  77.         }
  78.         if(phone==”){
  79.             layer.msg(‘请输入手机号码’, {icon: 0});
  80.             return false;
  81.         }
  82.         if(type==”){
  83.             layer.msg(‘请选择权限’, {icon: 0});
  84.             return false;
  85.         }
  86.         if(pass==”){
  87.             layer.msg(‘请输入密码’, {icon: 0});
  88.             return false;
  89.         }    
  90.         if(pass!=pass2){
  91.           layer.msg(‘两次密码不一致’, {icon: 0});
  92.           $(‘#pass’).val(“”).focus(); 
  93.           $(‘#pass2’).val(“”).focus();
  94.           return false;
  95.         } 
  96.      
  97.         $.ajax({
  98.                 url:“{:url(‘user_add’)}”,  //这里跳到后台控制器
  99.                 data:{name:name,phone:phone,type:type,pass:pass,sex:sex},  //注意这里一一对应要传的参数
  100.                 type:“POST”,
  101.                 success: function(data){
  102.                     if (data.status==1) {
  103.                       layer.msg(‘添加成功！’,{time:1000,icon: 1},function(){
  104.                         window.parent.location.reload();
  105.                         parent.layer.close(index);     //添加成功之后销毁当前弹窗
  106.                       })   
  107.      
  108.                     }else{
  109.                         layer.msg(data.info,{time:2000,icon: data.status});
  110.                     }
  111.                 }
  112.             });   
  113.         });
  114.     </script>
  115. </body>
  116. </html>

这里是控制器部分

  1. public function user_add(){
  2.     $time = time();
  3.     if(Request::instance()->isAjax()){
  4.         $name=Db::table(‘shop_admin’)->where([‘name’=>input(‘post.name’)])->count();
  5.         if($name >=1){
  6.             return json([“info”=>“该用户名已被占用!”,“status”=>0]);
  7.         }
  8.         $res = Db::table(‘shop_admin’)->
  9.         insert([
  10.                 ‘name’=>input(‘post.name’),
  11.                 ‘phone’=>input(‘post.phone’),
  12.                 ‘type’=>input(‘post.type’),
  13.                 ‘password’=>md5(input(‘post.pass’)),
  14.                 ‘sex’=>input(‘post.sex’),
  15.                 ‘time’=> $time                   ]);
  16.         if($res){
  17.             return json([“info”=>“添加成功！”,“status”=>1,“url”=>url(‘user/index’)]);
  18.         }else{
  19.             return json([“info”=>“注册失败!”,“status”=>5]);
  20.         }
  21.     }
  22. }
1.本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长!
2.分享目的仅供大家学习和交流，您必须在下载后24小时内删除!
3.不得使用于非法商业用途，不得违反国家法律。否则后果自负!
4.本站提供的源码、模板、插件等其他资源，都不包含技术服务请大家谅解!
5.如有链接无法下载或失效，请联系管理员处理!
6.本站资源售价只是赞助，收取费用仅维持本站的日常运营所需!