Home >PHP Framework >ThinkPHP >How to add methods using Thinkphp+layer+ajax (with code example)

How to add methods using Thinkphp+layer+ajax (with code example)

藏色散人
藏色散人forward
2021-07-28 16:45:562617browse

Thinkphp is a common PHP framework, and layer is a useful Web pop-up component. The following thinkphp tutorial column will introduce to you how Thinkphp combines layer pop-ups. Add ajax to complete the adding method.

How to add methods using Thinkphp+layer+ajax (with code example)

##Thinkphp combines the layer pop-up window with ajax to complete the addition method

  • Just bind the id to each input box

  • This is the front-end page

  • <!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=&#39;confirm&#39; class="layui-btn" >立即提交</a>//绑定事件,触发confirm方法
          </p>
      </form></p><script>$("#confirm").click(function(){
        var name   = $.trim($(&#39;#name&#39;).val());
        var phone  = $.trim($(&#39;#phone&#39;).val()); 
        var type  = $.trim($(&#39;#type&#39;).val()); 
        var pass  = $.trim($(&#39;#pass&#39;).val()); 										//先var
        var pass2  = $.trim($(&#39;#pass2&#39;).val()); 
        var sex  = $.trim($(&#39;#sex&#39;).val()); 
        var index=parent.layer.getFrameIndex(window.name);  
      
        if(name==&#39;&#39;){
            layer.msg(&#39;请输入管理员名称&#39;, {icon: 0});
            return false;
        }
        if(phone==&#39;&#39;){
            layer.msg(&#39;请输入手机号码&#39;, {icon: 0});
            return false;
        }
        if(type==&#39;&#39;){
            layer.msg(&#39;请选择权限&#39;, {icon: 0});
            return false;
        }
        if(pass==&#39;&#39;){
            layer.msg(&#39;请输入密码&#39;, {icon: 0});
            return false;
        }    
        if(pass!=pass2){
          layer.msg(&#39;两次密码不一致&#39;, {icon: 0});
          $(&#39;#pass&#39;).val("").focus(); 
          $(&#39;#pass2&#39;).val("").focus();
          return false;
        } 
    
        $.ajax({
                url:"{:url(&#39;user_add&#39;)}",  //这里跳到后台控制器
                data:{name:name,phone:phone,type:type,pass:pass,sex:sex},  //注意这里一一对应要传的参数
                type:"POST",
                success: function(data){
                    if (data.status==1) {
                      layer.msg(&#39;添加成功!&#39;,{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>
This is the controller part

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

Related recommendations:

The latest 10 thinkphp video tutorials

The above is the detailed content of How to add methods using Thinkphp+layer+ajax (with code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete