ThinkPHP + ajax + layer 弹出层 动态修改信息(示例二)

浏览:14515 发布日期:2015/03/11 分类:技术分享 关键字: ajax 弹出层 修改信息
注意啦
layer 插件已有更新了,请按照 layer 官方文档使用。以下代码为旧版本的,新版本已经不适用!


layer 弹窗插件,简洁、易用、实用:
http://sentsin.com/jquery/layer

老鸟可以略过……

公共部分引入的插件<!-- 引入 jquery 和 layer 插件 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/layer/layer.min.js"></script>
列表页面 index.html 部分代码:<a class="btn btn-info btn-xs oprabtn moduser" modurl="{:U('user/edit',array('id'=>$vo['id']))}">修 改</a>

<script>
$('.moduser').on('click', function(){
    var modurl = $(this).attr("modurl");    // 获取 要打开的链接地址
    $.layer({
        type: 2,
        title: '编辑管理员',
        maxmin: true,
        shadeClose: false, //开启点击遮罩关闭层
        area : ['800px', '460px'],
        offset : ['100px', ''],
        iframe: {src: modurl}    // 弹出层 iframe 要打开的链接地址
    });
});
</script>
模板 edit.html 部分代码,至于怎么在 模板 中进行 jquery 前端验证,自己写吧 \^0^/<form class="form-horizontal" id="myform" action="{:U('user/updates')}" method="post">
    <input type="hidden" name="id" value="{$id}" />
    <div class="form-group">
        <label class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="user_login" value="{$user_login}" placeholder="请输入用户名" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <a class="btn btn-primary" id="ajaxform">提 交</a>
        </div>
    </div>
</form>

<script>
// ajax 提交表单
$(document).ready(function(){
    $("#ajaxform").click(function(){    // 提交按钮触发事件
        var tourl = $("#myform").attr("action");    // 获取 表单的 提交地址
        // 序列化 表单数据 后提交 ,太简洁了
        $.post(tourl,$("form").serialize(),function(data){
            // data 是 ajaxreturn 返回的 数据
            // layer 插件的方法,只一句话,够简单
            layer.msg(data['info'], 2, 1);        // 2秒后自动关闭,-1代表不显示图标
            if(data['status'] == 1){
                // 刷新弹出层
                setTimeout("javascript:window.location.reload(__URL__)",2100);
            }
        });
    });
});
</script>
后台的自动验证也请自己写吧
最佳答案
评论( 相关
后面还有条评论,点击查看>>