怎么用Thinkphp+layer+ajax完成增加功能方法

本篇内容主要讲解“怎么用Thinkphp+layer+ajax完成增加方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Thinkphp+layer+ajax完成增加方法”吧!

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

怎么用Thinkphp+layer+ajax完成增加功能方法

  • 给每个input框绑定id就行了

  • 这是前端页面

<!DOCTYPEhtml><html>

<head>{includefile="public/head"title="顶部开始"/}
<!--让IE8/9支持媒体查询,从而兼容栅格-->
<!--[ifltIE9]>
<scriptsrc="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<scriptsrc="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<pclass="x-bodylayui-animlayui-anim-up">
<formaction=""method="post"class="layui-form">
<pclass="layui-form-item">
<labelfor="L_email"class="layui-form-label">
<spanclass="x-red">*</span>管理员名称</label>
<pclass="layui-input-inline">
<inputtype="text"name="name"class="layui-input"id="name">//绑定ld
</p>
<pclass="layui-form-midlayui-word-aux">
</p>
</p>
<pclass="layui-form-item">
<labelfor="L_username"class="layui-form-label">
<spanclass="x-red">*</span>手机号码</label>
<pclass="layui-input-inline">
<inputtype="text"name="phone"class="layui-input"id="phone">//绑定ld
</p>
</p>
<pclass="layui-form-item">
<labelclass="layui-form-label"><spanclass="x-red">*</span>请选择权限</label>
<pclass="layui-input-block"style="width:34%;">
<selectname="type"lay-verify="required"id="type">
<optionvalue=""></option>
<optionvalue="1">超级管理员</option>
<optionvalue="0">普通操作员</option>
</select>
</p>
</p>
<pclass="layui-form-item">
<labelfor="L_pass"class="layui-form-label">
<spanclass="x-red">*</span>密码</label>
<pclass="layui-input-inline">
<inputtype="password"name="pass"class="layui-input"id="pass">//绑定ld
</p>
<pclass="layui-form-midlayui-word-aux">
6到16个字符</p>
</p>
<pclass="layui-form-item">
<labelfor="L_repass"class="layui-form-label">
<spanclass="x-red">*</span>确认密码</label>
<pclass="layui-input-inline">
<inputtype="password"name="pass"class="layui-input"id="pass2">
</p>
</p>
<pclass="layui-form-item">
<labelclass="layui-form-label"><spanclass="x-red">*</span>性别</label>
<pclass="layui-input-block">
<inputtype="radio"name="sex"value="1"title="男"id="sex"checked="">//绑定ld
<inputtype="radio"name="sex"value="2"title="女"id="sex">//绑定ld
</p>
</p>
<pclass="layui-form-item">
<labelfor="L_repass"class="layui-form-label">
</label>
<ahref="javascript:;"id='confirm'class="layui-btn">立即提交</a>//绑定事件,触发confirm方法
</p>
</form></p><script>$("#confirm").click(function(){
varname=$.trim($('#name').val());
varphone=$.trim($('#phone').val());
vartype=$.trim($('#type').val());
varpass=$.trim($('#pass').val());										//先var
varpass2=$.trim($('#pass2').val());
varsex=$.trim($('#sex').val());
varindex=parent.layer.getFrameIndex(window.name);

if(name==''){
layer.msg('请输入管理员名称',{icon:0});
returnfalse;
}
if(phone==''){
layer.msg('请输入手机号码',{icon:0});
returnfalse;
}
if(type==''){
layer.msg('请选择权限',{icon:0});
returnfalse;
}
if(pass==''){
layer.msg('请输入密码',{icon:0});
returnfalse;
}
if(pass!=pass2){
layer.msg('两次密码不一致',{icon:0});
$('#pass').val("").focus();
$('#pass2').val("").focus();
returnfalse;
}

$.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>

这里是控制器部分

publicfunctionuser_add(){
$time=time();
if(Request::instance()->isAjax()){
$name=Db::table('shop_admin')->where(['name'=>input('post.name')])->count();
if($name>=1){
returnjson(["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){
returnjson(["info"=>"添加成功!","status"=>1,"url"=>url('user/index')]);
}else{
returnjson(["info"=>"注册失败!","status"=>5]);
}
}
}

到此,相信大家对“怎么用Thinkphp+layer+ajax完成增加方法”有了更深的了解,不妨来实际操作一番吧!这里是恰卡编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

发布于 2021-07-29 21:58:24
收藏
分享
海报
0 条评论
171
上一篇:支持python分布式计算框架Ray的示例分析 下一篇:怎么设置div的z-index属性让div在另外一个div之上
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码