ajax简单用户登录验证

原创 2019-03-31 15:02:08 430
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>ajax</title>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<form >
    用户名: <input type="text" class="name" name="name" >
    密码: <input type="text" class="pwd" name="pwd" >
    <br>
    <span id="ti" style="color: red"></span>
    <br>
    <input id="sub" type="submit" onclick="ck();return false;" value="提交">
</form>
</body>
</html>
<script type="text/javascript">
    let sub=document.querySelector("#sub");
    let ti=document.querySelector("#ti");
    function ck() {
       let formData =new FormData();
       let uname=document.querySelector(".name");
        let pwd=document.querySelector(".pwd");
       formData.append('name',uname.value);
        formData.append('pwd',pwd.value);
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                let flag=xmlHttp.responseText;
                if(flag==0){
                    ti.innerText='登录失败,用户名或密码错误';
                }else{
                    ti.innerText='登录成功';
                }
            }
        };
        xmlHttp.open("post", "ck.php");
        xmlHttp.send(formData);
    }
</script>

php页面

if($_POST){
    $data=['name'=>'admin','pwd'=>'123456'];
    $name=$_POST['name'];
    $pwd=$_POST['pwd'];
    if($name!=$data['name'] || $pwd!=$data['pwd']){
        echo 0;
    }else{
        echo 1;
    }
}

效果图:

ajax.gif

和之前邮箱验证差不多,也是判断post传入的值是否匹配


批改老师:查无此人批改时间:2019-04-01 09:46:58
老师总结:完成的不错。ajax请求接口验证,接口可以对app,小程序,网页同时使用。继续加油。

发布手记

热门词条