zoukankan html css js c++ java

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>';
}

查看全文

相关阅读:
TortoiseSVN和VisualSVN-下载地址
 asp.net mvc输出自定义404等错误页面，非302跳转
 IIS7如何显示详细错误信息
 关于IIS7.5下的web.config 404 配置的一些问题
 MVC 错误处理1
后台获取视图对应的字符串
 HTML5 ArrayBuffer：类型化数组（二）
Web 前沿——HTML5 Form Data 对象的使用（转）
HTML5 File 对象
 HTML5 本地裁剪图片并上传至服务器（转）

原文地址：https://www.cnblogs.com/mengor/p/8268977.html