使用Ajax做注册时的用户名存在性校验

最新推荐文章于 2022-05-03 17:09:17 发布

小蟹！

最新推荐文章于 2022-05-03 17:09:17 发布

阅读量211

点赞数

分类专栏：前端学习日记文章标签： ajax

本文链接：https://blog.csdn.net/qq_45310244/article/details/105179900

版权

前端学习日记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

现在我们来使用Ajax来做异步校验用户名是否存在的小案例，

效果展示

在本实例中，我们模拟了一个已经存在的用户名123，

下面就让我们来看主要的实现过程

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
    <h1>注册</h1>
    <form action="check.php" method="get">
        用户名：<input type="text" name="username"  id="username">&nbsp;&nbsp;<span id="username_result"></span><br>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>
<script type="text/javascript">
    window.onload = function(){
        var username = document.querySelector("#username");
        username.onblur = function(){//鼠标焦点移开
            var usernameValue = username.value;
            //Ajax  4步
            //var xhr = new XMLHttpRequest();//不兼容IE6
            var xhr = null;
                if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
                }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }//28-32处理IE6兼容
            xhr.open("get","check.php?username=" + usernameValue,true);//方法
            xhr.send(null);
            xhr.onreadystatechange = function(){
                var result = xhr.responseText;
                var username_result = document.querySelector("#username_result");
                if(result=="ok"){
                    username_result.innerText = "用户名可用";
                }else{
                    username_result.innerText = "用户名已存在";
                }
                    //callback
        };
    };
};
</script>
</html>

php代码：(模拟了一个已经存在的123用户)

小蟹！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Ajax做注册时的用户名存在性校验

现在我们来使用Ajax来做异步校验用户名是否存在的小案例，效果展示在本实例中，我们模拟了一个已经存在的用户名123，下面就让我们来看主要的实现过程前端代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注...
复制链接

扫一扫