PHP/AJAX——登錄頁面與登錄信息提示（非安全版本）

基本概念

AJAX：AJAX引擎其實是一個JavaScript對象，全寫是 window.XMLHttpRequest對象，由於瀏覽器的版本不同，特別是老版本的IE瀏覽器，雖然也支持AJAX引擎，但是寫法上有區別，在IE低版本中通常用 ActiveXObject對象來創建AJAX引擎。 AJAX 來自英文“Asynchronous Javascript And XML” 的縮寫，也稱爲異步JavaScript和XML。簡言之，就是一個JS對象，可以實現在網頁加載完成以後，不用刷新的情況下與服務器交互。產生極好的用戶體驗效果。

示例

前端

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>維修預約後臺登錄_ZSTUCA</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="\assets\css\bootstrap.min.css" rel="stylesheet">
        
        <link href=".\assets\css\style.css" rel="stylesheet">
    </head>
<body>
    <div class="container" style="text-align:center">
    <!-- 登錄框 -->
        <h1>計算機協會維修部</h1>
        <h2>維修預約後臺登錄</h2>
		<form class="form-signin" action="check.php" method="post">
			<p><label for="username" class="sr-only" title="用戶名">用戶名</label>
			<input type="text" id="username"  name="username" class="form-control" placeholder="用戶名" required autofocus> </p>
			<p><label for="Password" class="sr-only" title="密碼">密碼</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="密碼" required></p>
            <div style="min-height:25px;"><span id="result"></span></div>
            <p><button class="btn btn-lg btn-primary" type="submit" style="margin:0 50px 0 0 ;">登錄</button>
            <button class="btn btn-lg btn-primary" type="reset" style="margin:0 0 0 50px ;">重置</button></p>
        </form>
        <div class="footer">計算機協會維修隊</div>
    </div>
<script type="text/javascript">

var username=document.getElementById('username');

//用戶名輸入框失去焦點時觸發
console.log(username);
username.addEventListener('blur',function(){
    console.log("οnblur");
    //主角登場——AJAX引擎的創建及使用詳細代碼來了

    var ajax=new XMLHttpRequest(); //創建AJAX引擎實例

    //創建GET請求，發送請求時傳username值

    ajax.open('GET','check.php?username='+this.value); 

    //當AJAX引擎的狀態產生改變時觸發onreadystatechange屬性指向的函數（多次執行）

    //狀態值有5個：0 1 2 3 4 ，其中4表示服務器端響應就緒

    ajax.onreadystatechange=function(){

    //必須在服務器響應就緒，並且HTTP的狀態碼是200時才接收數據

    //ajax.readyState 獲取到服務器響應狀態碼，必須是4才表示就緒

    //ajax.status 獲取到HTTP的狀態碼，必須是200才表示成功

        if(ajax.readyState==4 && ajax.status==200){

        //ajax.responseText 接收服務器響應回來的內容

        console.log(ajax.responseText);
        console.log(ajax.responseText=='1');
        //接收到服務器響應數據後，AJAX工作已完成，可根據結果顯示提示信息

            if(ajax.responseText==1){

            result.innerHTML='恭喜你，可以登錄';

            result.style.color='#0a0'; //將字體設置爲紅色

            }else if(ajax.responseText==2){

            result.innerHTML='請輸入用戶名';

            result.style.color='#f00'; //將字體設置爲紅色

            }else{

            result.innerHTML='該用戶名不存在，請重新輸入';

            result.style.color='#f00'; //將字體設置爲綠色

            }

        }

    }

    ajax.send(); //發送請求

});

</script>

</body>

</html>

css

@charset "gb2312";
/* CSS Document */
 body {
            padding-top: 40px;
			padding-bottom: 40px;
			background-color: #eee;
        }
       .form-signin {
		  max-width: 400px;
		  padding: 15px;
		  margin: 0 auto;
		  margin-top: 100px;
		  border-style: solid; 
		  border-width: 3px;
		  border-color: aliceblue;
		  border-radius: 5%;
		  background-color: azure;
		}
		.form-signin p{
			padding: 15px;
			margin: 0 auto;
		}
		.form-signin .form-signin-heading{
			margin-bottom: 10px;
			max-width: auto;
		}
		.form-signin .checkbox {
		  margin-bottom: 10px;
		}
		.form-signin .checkbox {
		  font-weight: normal;
		}
		.form-signin .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-signin .form-control:focus {
		  z-index: 2;
		}
       .form-reg {
		  max-width: 300px;
		  padding: 15px;
		  margin: 0 auto;
		}
		.form-reg .form-signin-heading{
			max-width: 300px;
			width: 300px;
		}
		.form-reg .checkbox {
		  margin-bottom: 10px;
		}
		.form-reg .checkbox {
		  font-weight: normal;
		}
		.form-reg .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-reg .form-control:focus {
		  z-index: 2;
		}
		.form-reg input[type="email"] {
		  margin-bottom: -1px;
		  border-bottom-right-radius: 0;
		  border-bottom-left-radius: 0;
		}
		.form-reg input[type="password"] {
		  margin-bottom: 10px;
		  border-top-left-radius: 0;
		  border-top-right-radius: 0;
		}
		.login_lbl {
			visibility: hidden;
		}
		.footer{
			white-space: nowrap;
			vertical-align: middle;
			position: absolute;
			color: white;
			background-color: rgba(0,0,0,0.3);
			left: 0;
			right: 0;
			bottom: 33px;
			margin: auto;
			width: 175px;
			height: 22px;
			line-height: 20px;
			text-align: center;
		}

後端

<?php

function checkdata($username){
    //連接數據庫的代碼
    include 'conn.php';
    $sql="select ID from wxyy where ID=".$username;
    
    $rs=mysqli_query($connID,$sql);
    
    //將構造好的SQL語句發到服務器上執行
    
    if( mysqli_num_rows($rs) ){
    
        echo '1'; //如果用戶名找到有結果，證明該用戶名已存在，返回1
    
    }else{
    
        echo '0'; //如果用戶名未找到結果，證明該用戶名不存在，返回0
    
    }
    //關閉數據庫連接，釋放結果集
    mysqli_free_result($rs);
    mysqli_close($connID);
}
//服務器端的代碼可以使用PHP編寫，根據邏輯反饋數據給客戶端實現驗證功能
if(isset($_GET['username']) and $_GET['username']!=''){
    checkdata($_GET['username']);
}else{
    echo '2';
}
?>