导航

利用jQuery和Ajax实现检测用户名是否已经被注册

Posted on 2015-11-06 22:30  这算什么艾迪  阅读(8640)  评论(0编辑  收藏  举报

这是一个jQuery和Ajax的很基础的应用,是我出去面试时的一个面试题。当时脑子有点懵想了好久才知道该怎么去实现,现在回来再看了下书好好总结一下这个东西。

首先新建一个html文件,只有简单的几行代码,创建一个很基本的包含用户名和密码 以及注册按钮的文本框。代码如下 只简单说明问题 多余的暂时不加。

<form>
        用户名:<input type="text" cols="20" name="Name" id="Name">
        <span id="tishi"></span><br/>
        密码:<input type="pswd" name="pswd"><br/>
        <input type="submit" value="注册">
    </form>

用户名<input>后面的span 是用来添加提示信息的 如果该用户名没有被注册 正常 显示 如果不能显示 获取到id 向其插入警告字体

要用jQuery加Ajax最重要的是什么,没错就是引入jQuery库。。接下来就是得引入jQuery库,简直说的太有道理哈哈哈

接下来就是jQuery代码

<script type="text/javascript">
        $(document).ready(function(){
            check();
        });
        function check(){
            $('#Name').blur(function(){
                var a=$(this).val();
                var changUrl="yanzheng.php?action=check&name=a";
                $get(changUrl,function(str){
                    if(str=='1'){
                        $('#tishi').html("您输入的用户名已存在,请重新输入");
                    }
                });
            });
        }
    </script>

给文本框设置了Id之后 当用户失去焦点 就去调用check()函数 进行验证

获取到文本框当前的值,将其通过$get()方法提交给一个验证的php代码,通过php对后台数据进行验证处理,若在数据库查询到该用户名,则返回1,否则返回0。html页面拿到该值进行判断处理若$get到的值是1,则在<span>元素里插入提示您“您的用户名已存在,请重新输入”。如果返回值是0,则说明该用户名可以注册。继续进行。php代码我也就不贴了。

很基础的东西,往往有时意想不到的犯错,前几天去面试试了把水,自己总结了好多经验,很有收获,还是得去学习,很多基础东西你不去运用过一段时间就忘记了,自己很有感受。多看书,多敲代码,多思考。加油,我爱前端。I am a web developer,I love web front-end.