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

最新推荐文章于 2024-05-15 23:29:45 发布

LuHaiPing818

最新推荐文章于 2024-05-15 23:29:45 发布

阅读量1.8k

点赞数 2

分类专栏：干货文章标签： Thinkphp结合layer弹窗 ajax完成增删改查方法

本文链接：https://blog.csdn.net/qq_42242440/article/details/83893442

版权

干货专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>
    <div class="x-body layui-anim layui-anim-up">
    <form action="" method="post" class="layui-form">
      <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">
              <span class="x-red">*</span>管理员名称
          </label>
          <div class="layui-input-inline">
              <input type="text"  name="name" class="layui-input" id="name">//绑定ld
          </div>
          <div class="layui-form-mid layui-word-aux">
          </div>
      </div>
      <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
              <span class="x-red">*</span>手机号码
          </label>
          <div class="layui-input-inline">
              <input type="text"  name="phone" class="layui-input" id="phone">//绑定ld
          </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>请选择权限</label>
        <div 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>
        </div>
      </div>          
      <div class="layui-form-item">
          <label for="L_pass" class="layui-form-label">
              <span class="x-red">*</span>密码
          </label>
          <div class="layui-input-inline">
              <input type="password"  name="pass" class="layui-input" id="pass">//绑定ld
          </div>
          <div class="layui-form-mid layui-word-aux">
              6到16个字符
          </div>
      </div>
      <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
              <span class="x-red">*</span>确认密码
          </label>
          <div class="layui-input-inline">
              <input type="password"  name="pass" class="layui-input" id="pass2">
          </div>
      </div>
       <div class="layui-form-item" >
          <label class="layui-form-label"><span class="x-red">*</span>性别</label>
          <div 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
          </div>
        </div>       
      <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <a href="javascript:;" id='confirm' class="layui-btn" >立即提交</a>//绑定事件，触发confirm方法
      </div>
  </form>
</div>
<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]);
           }
       }
   }

LuHaiPing818

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Thinkphp结合layer弹窗加ajax完成增删改查方法

Thinkphp结合layer弹窗加ajax完成增删改查方法给每个input框绑定id就行了这是前端页面&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt;{include file=&quot;public/head&quot; title=&quot;顶部开始&quot; /} &amp;lt;!-
复制链接

扫一扫