與php的數據交互通過ajax完成，提交信息不會刷新頁面
如果想要直接與php交互數據，可以省去JavaScript部分
先上幾個圖
登錄界面：
注冊界面
注冊成功，會有一個注冊信息的彈窗
登錄界面，同樣也有個彈窗
如果用不存在的賬號登錄或者密碼錯誤，會簡單進行一個錯誤提示
下面是代碼
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="root"> <div id="mainlogin" class="main"> <div class="inputbox"> <div class="username"> <span>用戶名：</span> <input id="login_uname" class="uname" type="text" name='login_username' placeholder="請輸入用戶名"><br><br> </div> <div class="password"> <span>密 碼：</span> <input id="login_pwd" class="pwd" type="password" name='login_password' placeholder="請輸入密碼"> </div> </div> <!-- 登錄 --> <div id="logincontent" class="btnbox"> <div class="btn"> <button id="loginbtn" class="button">登 錄</button> </div> <div class="tohref"> <span>沒有賬號？</span><a id="toregist" class="href" href="javascript:;">點擊去注冊</a> </div> </div> <!-- 注冊 --> <div id="registcontent" class="btnbox active"> <div class="btn"> <button id="registbtn" class="button">注 冊</button> </div> <div class="tohref"> <a id="tologin" class="href" href="javascript:;">去登錄</a> </div> </div> </div> </div> <script src="js/index.js"></script> </body> </html>
CSS
a{ text-decoration: none; } span{ cursor: default; } .root{ text-align: center; } .main{ width: 400px; height: 300px; background:#2eafe0; border: #f9bb48 2px solid; border-radius:20px; position: relative; margin: 200px auto 0; } .username,.password{ font-size: 30px; color:#b94242; } .uname,.pwd{ width: 200px; height: 40px; border: #e6ec6f 1px solid; border-radius: 8px; font-size: 25px; } #registcontent{ position: absolute; left:100px; top:152px; } #logincontent{ position: absolute; left:100px; top:152px; } .inputbox{ margin-top: 20px; } .btnbox{ margin-top: 30px; justify-content: space-around; } .button{ width: 200px; height: 45px; color: #f6f7dc; background: #e28003; border: #c7e02e 1px solid; font-size: 25px; border-radius:10px; cursor: pointer; position: absolute; left: 0; top: 0; } .tohref{ width: 200px; height: 20px; margin-top: 30px; position: absolute; left: 0; top: 40px; animation: href 1s 2s; } .href{ color: #ab2011; cursor: pointer; } .active{ display: none; } .animation{ animation: btn 1.5s; } @keyframes btn{ 0%{ top:-184px ; } 20%{ top:0 ; } 40%{ top: -100px; } 60%{ top: 0; } 80%{ top: -50px; } 100%{ top: 0; } } @keyframes href{ 0%{ top: 40px; transform: rotateY(-360deg); font-size: 20px; } 100%{ top: 40px; transform: rotateY(0deg); font-size: 16px; } }
JavaScript
window.onload = function (){ var regist = document.getElementById('registbtn'); var login = document.getElementById('loginbtn'); var tologin = document.getElementById('tologin'); var toregist = document.getElementById('toregist'); var logincontent = document.getElementById('logincontent'); var registcontent = document.getElementById('registcontent'); var loginbtn = document.getElementById('loginbtn'); var registbtn = document.getElementById('registbtn'); // 切換到登錄按鈕 tologin.onclick = function (){ logincontent.className = 'btnbox'; registcontent.className = 'btnbox active'; loginbtn.className = 'button animation'; registbtn.className = 'button'; } // 切換到注冊按鈕 toregist.onclick = function (){ logincontent.className = 'btnbox active'; registcontent.className = 'btnbox'; loginbtn.className = 'button'; registbtn.className = 'button animation'; } // 注冊 regist.onclick = function (){ var registname = document.getElementById('login_uname').value; var registpwd = document.getElementById('login_pwd').value; var type = 'regist'; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function (res){ if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } xhr.open('POST','index.php',true); xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send('login_username='+registname+'&login_password='+registpwd+'&type='+type); } // 登錄 login.onclick = function (){ var loginname = document.getElementById('login_uname').value; var loginpwd = document.getElementById('login_pwd').value; var type = 'login'; // alert(loginname); // alert(loginpwd); if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function (res){ if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } xhr.open('POST','index.php',true); xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send('login_username='+loginname+'&login_password='+loginpwd+'&type='+type); } }
PHP
<?php header('Content-type:text/html;charset:utf-8'); // 服務器 $server = 'localhost'; // 用戶名 $db_username = 'root'; // 密碼 $db_password = 'root'; // 連接數據 $con = new mysqli($server,$db_username,$db_password); // var_dump($con); // 判斷是否連接成功 if($con->connect_error){ die('數據庫連接失敗'); } // 選擇數據庫 mysqli_select_db($con,'adopey'); // $registName=$_REQUEST['regist_username']; // $registPassword=$_REQUEST['regist_password']; $loginName=$_REQUEST['login_username']; $loginPassword=$_REQUEST['login_password']; $type=$_REQUEST['type']; // 注冊 if($type=='regist'){ // 向表中插入注冊信息 $registinfo = "insert into usera (uname,upwd) VALUES('$loginName','$loginPassword')"; mysqli_query($con,$registinfo); // 注冊信息 echo '注冊成功 用戶名:'.$loginName.' 密碼：'.$loginPassword; } // 注冊部分結束 // 登錄部分 if($type=='login'){ // 檢查用戶名和密碼是否匹配 $check="SELECT * FROM usera WHERE uname='$loginName' and upwd='$loginPassword'"; $login=mysqli_query($con,$check);//$login是obiect，是mysqli_result類型 // 把結果轉換成數字類型，$login里面有個'num_rows'，值為0或1 $res=mysqli_num_rows($login);//判斷是否為0 if($res){ echo $loginName.',您已登陸成功'; }else{ echo '用戶名或密碼錯誤'; } } // 關閉數據庫 mysqli_close($con);