摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.post()</titl
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.post()</title> </head> <body> <h3>用户登陆</h3> <form> <p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p> <p><label for="password">密码:</label><input type="password" id="password" name="password"></p> <p><button type="button">提交</button></p> </form> <script src="lib/jquery-3.3.1.min.js"></script> <script> let btn=document.getElementsByTagName('button')[0]; btn.onclick = function () { //1.创建xhr对象 let xhr = new XMLHttpRequest(); //2.监听响应状态 xhr.onreadystatechange = function () { //判断是否获取到响应的数据 if(xhr.readyState ===4){ if(xhr.status ===200){ //在页面创建一个新元素用来显示响应的数据 let p = document.createElement('p'); p.style.color='red'; let json = JSON.parse(xhr.responseText); //如果json.status==1,表示查询成功 if(json.status ===1){ p.innerHTML= json.msg; }else if(json.status ===0){ p.innerHTML= json.msg; } document.forms[0].appendChild(p); btn.disabled=true; setTimeout(function(){ document.forms[0].removeChild(p); btn.disabled = false; if (json.status == 1) { location.href = 'inc/admin.php'; } },2000) }else { alert('响应失败'.xhr.status); } }else { //http请求正在继续,这里可以放一个gif动图提示用户 } }; //3.设置请求参数 xhr.open('post','inc/check4.php',true); //4.设置头信息,将内容类型设置为表单提交方式 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //5.发送请求 let data = { email:document.getElementsByName('email')[0].value, password:document.getElementsByName('password')[0].value }; let data_json = JSON.stringify(data); xhr.send('data='+data_json); } </script> </body> </html>
<?php header("Content-type: text/html; charset=utf-8"); //echo json_encode('测试数据'); //连接数据库并验证用户 //print_r($_POST); $email = htmlspecialchars(trim($_POST['email'])); $password = sha1(htmlspecialchars(trim($_POST['password']))); //print_r($password); //到数据库中去验证用户提交的数据 $pdo = new PDO('mysql:host=localhost;dbname=laoshi','root','root'); $sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email AND `password`= :password"; $stmt = $pdo->prepare($sql); $stmt->execute(['email'=>$email,'password'=>$password]); if($stmt->fetchColumn(0) == 1){ $status = 1; $message='验证通过'; }else{ $status = 0; $message='邮箱或密码错误'; } echo json_encode(['status'=>$status,'message'=>$message]);
花了2周才成功实现,主要是后端没学习,一开始数据库里的password字符的位数设置成30,所以一直都不对,后来设置成50就实现了,password使用sha1()加密后是40位的
批改老师:韦小宝批改时间:2019-01-14 09:50:04
老师总结:恩 写的没毛病 代码的注释也很清晰 可以考虑使用jQuery和ajax来进行改写哦 jQuery和ajax来进行异步无刷新提交就方便的多咯