js中的ajax（用户登录）

一.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);
    }

效果：

 

 

 

 

 

 

 如果出现上面的错误，应该是后台文件写错了，检查一下。

posted @ 2019-12-29 18:54  翱翔的猴子  阅读(4893)  评论(0)    收藏  举报