自动检测用户名可用性-CSDN博客

本篇幅为实现注册页面无需提交按钮自动判断用户名是否存在

前言

这里我使用的是php环境，进行学习

php环境搭建可以直接使用phpstudy

ajax原理部分，可取隔壁看原理

代码实现

首先我们创建一个页面表单，用来输入数据，由于这里是用ajax实现的用户名判断，form表单中可以不设置action和method属性值

代码如下

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <title>
        验证表单
    </title>
    <body>
        <form>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="test" id="user">
                    </td>
                    <td>
                        <span id="span"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="test" name="pwd" id="pass">
                    </td>
                    <td><span></span></td>
                </tr>
           </table>
    </form>
    </body>
</html>

后端代码如下

<?php
$test = $_POST['user'];
if($test == 'admin'){
    echo 'no';
}else{
    echo 'ok';
}
?>

可以正常输出，如下图

ajax实现，使用js写法

    <script>
        window.onload=function(){  ///js的入口函数
            //第一步获取上面的两个文本框
            var username = this.document.getElementById("user");//这里可以直接.value获取文本框的值
            var pass = this.document.getElementById("pass");//但不获取是为了给文本框做视界，以便于鼠标离开文本框就触发

            //通过onblur函数做视界
            username.onblur=function(){
                var userValue = username.value;//获取文本框的值
                console.log(userValue)///查看是否获取到了文本框的值

                //兼容性代码，在ie6版本以下是无法使用XMLHttpRequest的，所以
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

                //准备发送
                xhr.open("post","http://127.0.0.1/test/ajax/1.php",true);//这里的发送方式取决于后台，true待变异步发送
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
                var user = "user="+userValue;//定义发送内容
                console.log(user)
                xhr.send(user);

                //通过回调函数onreadystatechange进行数据回调
                xhr.onreadystatechange=function(){
                    if (xhr.readyState == 4 && xhr.status == 200){//说明请求完成/响应200，说明请求成功
                        var request = xhr.responseText;//获取响应的内容
                        //console.log(request);
                        if (request == "ok"){
                            document.getElementById("span").innerText="用户名可以使用";//回显到span标签
                        }else{
                            document.getElementById("span").innerText="用户名已存在";
                        }
                    }
                }

            }

        }
    </script>