php点击登陆弹出层并结合ajax+json显示登录后状态

bootstrap+php演示弹出登录表单，输入用户名或密码后，ajax传参给后台，并获得登陆后的返回值。

分类：表单代码 > 注册登录框难易：初级

下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

hwLayer+ajax弹出登录框

$(function() {
    $('#form-btn').hwLayer({
        width: 480,
        tapLayer: false,
        afterClose: function() {
            console.log('close');
        }
    });
    $(".hwLayer-ok").on('click', function(event) {
        event.preventDefault();
        var user = $('#user').val();
        var pass = $('#password').val();
        if (user == '') {
            $('#msg').addClass('text-danger').text('用户名不能为空！');
            return false;
        }
        if (pass == '') {
            $('#msg').addClass('text-danger').text('密码不能为空！');
            return false;
        }
        $.ajax({
            url: 'login.php',
            type: 'POST',
            dataType: 'json',
            data: {username: user, password: pass},
            beforeSend: function() {
                $('#msg').addClass('text-success').text('正在登录...');
                $(".hwLayer-ok").attr('disabled', true);
            },
            success: function(res) {
                if (res.code == 1) { //登录成功
                    $('#result').html('欢迎您，' + user + '，登录时间：' + res.logintime);
                    $('#msg').removeClass('text-danger').addClass('text-success').text('登录成功！');
                    $('#hw-layer-login').hwLayer('close');
                } else {
                    $('#msg').addClass('text-danger').text('用户名或密码错误！');
                }
                $(".hwLayer-ok").removeAttr('disabled');
            }
        });
    });
    //escape关闭弹出层
    $('.hw-overlay').on('click', function(event) {
        if (event.target == this) {
            $('#hw-layer-login').hwLayer('close');
        }
    });
});

login.php返回值

$arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s"));
echo json_encode($arr);