结合layer插件ajax弹出层

资料来源：网络整理时间：2023/2/14 0:16:19 共计：3607 浏览

layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
IndexController.class.php代码



	
		public function index(){
	
	
		        $this->user=M('User')->select();
	
	
		        $this->display();    
	
	
		    }
	
	
		
	
	
		    //添加栏目
	
	
		    public function add(){
	
	
		        $this->display();
	
	
		    }
	
	
		    //保存栏目数据
	
	
		    public function areate(){
	
	
		        if(M('User')->add($_POST)){
	
	
		            $this -> success('添加成功！','index');
	
	
		        } else {
	
	
		            $this -> error('添加失败！');
	
	
		        }
	
	
		    }
	
	
		
	
	
		    public function edit(){
	
	
		        $id = $_GET['id'];
	
	
		        $this->user =M('User')->find($id);
	
	
		        $this->display();   
	
	
		    }
	
	
		    public function updates(){
	
	
		        $data['id']=$_POST['id'];
	
	
		        $data['username']=$_POST['username'];
	
	
		        $arr->data=M('User')->save($data);
	
	
		        if($arr>0){
	
	
		            $this -> success('修改成功！','index');
	
	
		        }else{
	
	
		            $this -> error('修改失败！');
	
	
		        }
	
	
		    }
	


	复制代码

index.html代码



	
		<!doctype html>
	
	
		 <html lang="en">
	
	
		 <head>
	
	
		    <meta charset="UTF-8">
	
	
		    <title>Document</title>
	
	
		    <!-- 引入 jquery 和 layer 插件 -->
	
	
		     <script src="http://res.xiami.net/pc/lay/lib.js"></script>
	
	
		     <script src="__Public__/layer/layer.min.js"></script>
	
	
		 </head>
	
	
		 <body>
	
	
		        <a href="__URL__/add">添加</a>
	
	
		    <table>
	
	
		    <volist id="vo" name="user">
	
	
		        
	
	
		            <tr>
	
	
		                <td>{$vo.username}</td>
	
	
		                <td><a href="{:U('Index/edit',array('id'=>$vo['id']))}">修 改</a></td>
	
	
		            </tr>
	
	
		        
	
	
		    </volist>
	
	
		    </table> 
	
	
		
	
	
		 </body>
	
	
		 </html>
	


	复制代码

add.html代码



	
		<!doctype html>
	
	
		 <html lang="en">
	
	
		 <head>
	
	
		    <meta charset="UTF-8">
	
	
		    <title>Document</title>
	
	
		     <!-- 引入 jquery 和 layer 插件 -->
	
	
		    <script src="http://res.xiami.net/pc/lay/lib.js"></script>
	
	
		    <script src="__Public__/layer/layer.min.js"></script>
	
	
		    <style type="text/css">
	
	
		        .btn{
	
	
		            width: 120px;
	
	
		            height: 40px;
	
	
		            background: #000;
	
	
		            color: #fff;
	
	
		            display: block;
	
	
		            text-align: center;
	
	
		            line-height: 40px;
	
	
		        }
	
	
		    </style>
	
	
		 </head>
	
	
		 <body>
	
	
		    <form class="form-horizontal" id="form" action="{:U('Index/areate')}" method="post">
	
	
		     <div class="form-group">
	
	
		         <label class="col-sm-2 control-label">用户名</label>
	
	
		         <div class="col-sm-4">
	
	
		             <input type="text" class="form-control" name="username"  placeholder="请输入用户名" />
	
	
		         </div>
	
	
		     </div>
	
	
		     <div class="form-group">
	
	
		         <div class="col-sm-offset-2 col-sm-10">
	
	
		             <a class="btn btn-primary" id="submit">提 交</a>
	
	
		         </div>
	
	
		     </div>
	
	
		 </form>
	
	
		
	
	
		 <script>
	
	
		 // ajax 提交表单
	
	
		$(document).ready(function(){
	
	
		    $("#submit").click(function(){    // 提交按钮触发事件
	
	
		        var tourl = $("#form").attr("action");    // 获取 表单的 提交地址
	
	
		        // 序列化 表单数据 后提交 ，太简洁了
	
	
		        $.post(tourl,$("form").serialize(),function(data){
	
	
		            //直接返回首页
	
	
		            /*layer.msg(data['info'],5,data['status'],function(){
	
	
		                location.href = "{:U('Index/index')}"; //自动关闭后返回首页
	
	
		            });*/
	
	
		            //确定返回首页还是再次添加
	
	
		            $.layer({
	
	
		                shade: [0.5, '#000'], //弹出层背景颜色
	
	
		                dialog: {
	
	
		                    msg: data['info'], //读取后台返回信息
	
	
		                    btns: 2,           //设置两个按钮     
	
	
		                    type: data['status'], //通过返回的代码设置图标 1或0
	
	
		                    btn: ['返回首页','再次添加'],
	
	
		                    yes: function(){
	
	
		                        location.href = "{:U('Index/index')}"; //关闭后返回首页
	
	
		                    }, no: function(){
	
	
		                        location.reload(); //关闭后刷新页面
	
	
		                    }
	
	
		                }
	
	
		            });            
	
	
		        });
	
	
		    });
	
	
		 });
	
	
		 </script>
	
	
		 </body>
	
	
		 </html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery实现无刷新切换主题皮肤功能 | ·下一条：JS中字符串转换为日期对象的方法