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

dab86439b59871ad15a4ef5ebeb19cd3.png

下载资源

下载积分:

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);

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐