使用者登入頁面(js實作get方式的ajax請求)
login.html程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <hr size="1"> 用户:<input type="text" id="username" name="username"/><br> 密码:<input type="password" id="password" name="password" /><br> <div id="error_message" style="color: red"></div> <input type="submit" id='login' name='login' value="登录"> <div id="success"></div> </body> <script type="text/javascript"> document.getElementById("login").onclick = function () { var name = document.getElementById("username").value; var pwd = document.getElementById("password").value; var oError = document.getElementById("error_message"); var isNotError = true; if(name==""){ oError.innerHTML = "警告:用户名为空 "; isNotError = false; return; }else if(pwd==""){ oError.innerHTML = "警告:密码为空 "; isNotError = false; return; } //创建XHR对象 var xhr = new XMLHttpRequest(); //设置请求URL var url = "./success.php?username=" + name+"&password="+pwd; //设置XHR对象readyState变化时响应函数 xhr.onreadystatechange = function () { var success = document.getElementById("success"); //readyState是请求的状态,为4表示请求结束 if (xhr.readyState == 4) { //responseText服务器响应的内容 var data = eval(this.responseText); for(var index in data) { if(data[index].code==1){ alert(data[index].message);//密码错误 }else if(data[index].code==2){ alert(data[index].message);//您已经登入了 success.innerHTML = "用户名:"+data[index].session+"---"+"<a href='logout.php'>注销</a>";; }else if(data[index].code==3){ alert(data[index].message);//登录成功 success.innerHTML = "您好!"+data[index].session+",欢迎回来!<a href='logout.php'>注销</a>"; } else if(data[index].code==4){ alert(data[index].message);//没有此用户,请重新登录 location.href='login.html'; } } } }; //打开链接 xhr.open("get", url, true); //发送请求 xhr.send(); } </script> </html>
ajax提交到的url位址是success.php,在success.php中進行資料庫的連接以及對資料進行處理,之後透過json格式返回到登入頁面顯示出來,並透過alert列印查看
success.php程式碼如下:
<?php /** * Created by PhpStorm. * User: Administrator * Date: 2018/2/27 0027 * Time: 上午 10:47 */ header('Content-type:text/html;charset=utf-8'); if ($_SERVER['REQUEST_METHOD'] == 'GET') { $username=trim($_GET['username']); $password=$_GET['password']; } $mysqli = new mysqli('localhost', 'root', 'root', 'student'); $result = $mysqli->query("SELECT password FROM user WHERE username = "."'$username'"); $rs=$result->fetch_row(); if (!empty($rs)){ if ($password != $rs[0]) { $data = array( array('code' => 1, 'message' => '密码错误,请重新登录'), ); echo json_encode($data); }else{ $expire=3600; ini_set('session.gc_maxlifetime', $expire);//保存1小时 if (empty($_COOKIE['PHPSESSID'])) { session_set_cookie_params($expire); session_start(); }else{ session_start(); setcookie('PHPSESSID', session_id(), time() + $expire); } if(isset($_SESSION['username'])){ $data = array( array('code' => 2, 'message' => '您已经登入了,请不要重新登入','session'=>$_SESSION['username']), ); echo json_encode($data); }else{ $_SESSION['username']=$_GET['username']; $data = array( array('code' => 3, 'message' => '登录成功','session'=>$_SESSION['username']), ); echo json_encode($data); } } }else{ $data = array( array('code' => 4, 'message' => '没有此用户,请重新登录'), ); echo json_encode($data); }