效果圖：
AJAX實作登入驗證 
AJAX實作登入驗證 AJAX實作登入驗證 AJAX實作登入驗證 HTML檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
使用者名：<input type="text" id="un"><br>
密 碼：<input type="text" id="pw"><br>
<input type="button" value="登入" id='login'>
</form>
<h1 id='result'></h1>
<script>
// 擷取相關元素
var lgBtn = document.getElementById('login');//登入按鈕
var unInp = document.getElementById('un');//使用者名輸入框
var pwInp = document.getElementById('pw');//密碼輸入框
// 使用者點選登入按鈕
lgBtn.onclick = function(){
var uname = unInp.value;//使用者名
var pw = pwInp.value;//密碼
// 把使用者填寫的使用者名和密碼送出給後端15login.php
// 建立ajax對象
var xhr = new XMLHttpRequest();
// 配置請求資訊
xhr.open('GET','./15login.php?username='+uname+'&password='+pw);
// 接受響應
xhr.onload = function(){
// 等待後端響應，如果結果是1表示登入成功，如果結果是0表示登入失敗
console.log(xhr.responseText);//是一個字元串
if(xhr.responseText=="1"){
document.getElementById('result').innerHTML = "登入成功"
}else{
document.getElementById('result').innerHTML = "登入失敗，請重來"
}
}
// 發送請求
xhr.send()
}
</script>
</body>
</html>
PHP檔案
<?php
// 0 接受前端傳遞的使用者資訊
$name = $_GET['username'];//使用者名
$pass = $_GET['password'];//密碼
// 定義幾個資料庫資訊
$host = '127.0.0.1';
$username = 'root';
$password = 'root';
$db = 'student';
// 0 進行中文亂碼
header('content-type:text/html;charset=utf-8;');
// 1 建立資料庫連結
$conn = mysqli_connect($host,$username,$password,$db);
// 2 執行查詢的sql語句
$sql = "SELECT * FROM `userinfo` WHERE `username`='$name' AND `password`='$pass'";
$res = mysqli_query($conn,$sql);
// 3 解析單行資料結果
$row = mysqli_fetch_assoc($res); //沒有查詢結果裡面沒有符合條件的資料，單行解析結果是null
// var_dump($row);
if($row){
// 如果登入成功，告訴前端登入成功（也可以嘗試設定cookie）
echo 1;
}else{
// 如果登入失敗，告訴前端登入失敗
echo 0;
}
// 4 斷開連結
mysqli_close($conn);
?>
