一.ajax完成用户名异步检验
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名是否存在</title> </head> <body> <form action="" method="post"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" placeholder="请输入用户名" class="name" id="name" ></td> <td><span class="note"></span></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" class="pwd" ></td> </tr> <tr><td><input type="submit" id="check"></td></tr> </table> </form> </body> </html>
js代码(当鼠标移开用户名标签时,ajax引擎自动与后台实现异步交互,从而完成验证)
<script type="text/javascript"> var name=document.getElementById('name'); var pwd=document.getElementsByClassName('pwd')[0]; document.querySelector('.name').onblur=function () { document.querySelector('.note').innerHTML='验证中……'; //1.创建对象 var xhr=new XMLHttpRequest(); //2.设置请求行(get请求数据写在url后面) xhr.open('post','check.php'); //3.设置请求头(get请求可以省略,post不发送数据也可以省略) xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded"); //3.5注册回调函数 xhr.onload=function () { if(xhr.status==200 && xhr.readyState==4) { console.log(xhr.responseText); var data=JSON.parse(xhr.responseText); console.log(data); if(data.flag==3) { document.querySelector('.note').innerHTML = data.msg; } } }; //4.请求主体发送(get请求为空,或者写null,post请求数据写在这里,如果没有数据,直接为空或者写null) //post请求发送数据 写在send中 //key=value&key2=value2 xhr.send("username="+document.getElementById('name').value); }; </script>
后台php文件(check_username.php):
<?php //print_r($_POST); $flag=0; $msg='failure'; $username=isset($_POST['username'])?$_POST['username']:""; $password=isset($_POST['password'])?$_POST['password']:""; if($username==='admin'){ $flag=3; $msg='用户名正确'; }else { $flag=3; $msg='用户名不存在'; } ?>
效果如下:
知识点-----AJAX - onreadystatechange 事件
当发送一个请求后,客户端需要确定这个请求什么时候会完成,因此,XMLHttpRequest对象提供了onreadystatechange
事件机制来捕获请求的状态,继而实现响应。
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当readyState
改变时,就会触发onreadystatechange
事件。
readyState
属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
注意:POST请求不加请求头,数据是传不到后台的
二.提交时完成后用户名与密码的验证
创建一个后台文件(check_login.php)用来验证用户名与密码
新建php文件check_login.php(用户数据这里写死,一般是从数据库查询得到的)
$username=isset($_POST['username'])?$_POST['username']:""; $password=isset($_POST['password'])?$_POST['password']:""; if($username=='admin' && $password==123){ $flag=1; $msg='登录成功'; } else { $flag=2; $msg='密码错误'; } $response=[ 'flag'=>$flag, 'msg'=>$msg, ]; echo json_encode($response);
在原来的登录界面的js脚本里加入点击时的验证
document.getElementById('check').onclick=function () { var xhr=new XMLHttpRequest(); xhr.open('post','check_login.php'); xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded"); xhr.onreadystatechange=function () { if(xhr.readyState==4 && xhr.status==200){ var data=JSON.parse(xhr.responseText); if(data.flag==1) { alert(data.msg); console.log(data); }else if(data.flag==2){ alert(data.msg); console.log(data); } } }; xhr.send('username='+document.getElementById('name').value+'&password='+pwd.value); }
效果:
如果出现上面的错误,应该是后台文件写错了,检查一下。