ajax原生验证用户名是否存在

来源：化拓教育网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax</title>
    <script>
        function info(){
            var username=document.getElementById('username');
　　　　　　　//处理特殊字符
            var user_value=encodeURIComponent(username.value);
            var xhr=new XMLHttpRequest();
            //准备向服务器发送请求的一些东西
            //xhr.open(type,url,同步还是异步);
            xhr.open('get','index.php?username='+user_value,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    //alert(xhr.resposenText);
                    //console.log(xhr.responseText); 
                    document.getElementById('msg').innerHTML=xhr.responseText;
                }
            }
            //发送到服务器
            xhr.send();          
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="info()"><span id="msg"></span><br/>
</body>
</html>

<?php
$users=['zhangsan','lisi','wangwu'];
if(in_array($_GET['username'],$users)){
    echo '<font color="red">sorry,用户名已存在</font>';
}else{
    echo '<font color="green">恭喜，该用户名可用</font>';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax</title>
    <script>
        function info(){
            var username=document.getElementById('username');
　　　　　　　//处理特殊字符
            var user_value=encodeURIComponent(username.value);
            var xhr=new XMLHttpRequest();
            //准备向服务器发送请求的一些东西
            //xhr.open(type,url,同步还是异步);
            xhr.open('post','index.php',true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    //alert(xhr.resposenText);
                    //console.log(xhr.responseText); 
                    document.getElementById('msg').innerHTML=xhr.responseText;
                }
            }
            //使用post放松，指定头信息
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //发送到服务器
            xhr.send('name='+user_value);          
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="info()"><span id="msg"></span><br/>
</body>
</html>

<?php
$users=['zhangsan','lisi','wangwu'];
if(in_array($_POST['name'],$users)){
    echo '<font color="red">sorry,用户名已存在</font>';
}else{
    echo '<font color="green">恭喜，该用户名可用</font>';
}

转载于:https://www.cnblogs.com/mengor/p/82677.html

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文