php彈出式登錄窗口並獲得登錄後返回值
阿新 • • 發佈:2019-04-23
.text word www. -o type tst pos click 傳參
一款bootstrap樣式結合php制作的彈出式登錄窗口,輸入用戶名和密碼後,ajax傳參給後臺,並獲得登錄後返回值。
hwLayer+ajax彈出登錄框
1 $(function() { 2 $(‘#form-btn‘).hwLayer({ 3 width: 480, 4 tapLayer: false, 5 afterClose: function() { 6 console.log(‘close‘); 7 } 8 }); 9 $(".hwLayer-ok").on(‘click‘, function(event) { 10 event.preventDefault(); 11 var user = $(‘#user‘).val(); 12 var pass = $(‘#password‘).val(); 13 if (user == ‘‘) { 14 $(‘#msg‘).addClass(‘text-danger‘).text(‘用戶名不能為空!‘); 15 return false; 16 } 17 if (pass == ‘‘) {18 $(‘#msg‘).addClass(‘text-danger‘).text(‘密碼不能為空!‘); 19 return false; 20 } 21 $.ajax({ 22 url: ‘login.php‘, 23 type: ‘POST‘, 24 dataType: ‘json‘, 25 data: {username: user, password: pass}, 26 beforeSend: function() { 27 $(‘#msg‘).addClass(‘text-success‘).text(‘正在登錄...‘); 28 $(".hwLayer-ok").attr(‘disabled‘, true); 29 }, 30 success: function(res) { 31 if (res.code == 1) { //登錄成功 32 $(‘#result‘).html(‘歡迎您,‘ + user + ‘,登錄時間:‘ + res.logintime); 33 $(‘#msg‘).removeClass(‘text-danger‘).addClass(‘text-success‘).text(‘登錄成功!‘); 34 $(‘#hw-layer-login‘).hwLayer(‘close‘); 35 } else { 36 $(‘#msg‘).addClass(‘text-danger‘).text(‘用戶名或密碼錯誤!‘); 37 } 38 $(".hwLayer-ok").removeAttr(‘disabled‘); 39 } 40 }); 41 }); 42 //escape關閉彈出層 43 $(‘.hw-overlay‘).on(‘click‘, function(event) { 44 if (event.target == this) { 45 $(‘#hw-layer-login‘).hwLayer(‘close‘); 46 } 47 }); 48 });
login.php返回值
1 $arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s")); 2 echo json_encode($arr);
本實例下載:https://www.sucaihuo.com/php/877.html
php彈出式登錄窗口並獲得登錄後返回值