1. 程式人生 > >php彈出式登錄窗口並獲得登錄後返回值

php彈出式登錄窗口並獲得登錄後返回值

.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彈出式登錄窗口並獲得登錄後返回值