Home > Article > php教程 > php ajax实现无刷新检测用户名是否可用

php ajax实现无刷新检测用户名是否可用

WBOYOriginal: 2016-05-25 16:43:12993browse

在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册,这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax,整了一个功能不算完善,但足以应付普通使用的代码,更牛的功能大家自己去发掘.

文件说明:

reg.php 为注册页面

check_user.php 为用户验证页面 (GET,POST方式任选)

jquery-1.7.1.js 为jQuery文件,下载地址：http://code.jquery.com/jquery-1.7.1.js (右键另存为即可)

代码示例

reg.php 注册页面(内含2种方式,请任选一种),代码如下:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>PHP+Ajax 异步通讯注册验证</title> 
    <script type="text/javascript" src="jquery-1.7.1.js"></script> <!--千万别忘记引用jQuery文件，否则无法执行--> 
    <script type="text/javascript"> 
    $(function(){ 
    //方式一   jQuery(普通应用时推荐，简单易用),代码如下: 
        $("#user").blur(function(){        //文本框鼠标焦点消失事件 
         
            $.get("check_user.php?user="+$("#user").val(),null,function(data)   //此处get方式 可换为post方式按需求调整，其他无需修改使用方式一样 
            { 
                $("#chk").html(data);   //向ID为chk的元素内添加html代码 
            }); 
             
            }) 
    //方式二  aJax方式 (比较复杂，如无特殊需求推荐使用方式一),代码如下: 
            $("#user").blur(function(){ 
             
                $.ajax({ 
                         
                    url:"check_user.php", //请求验证页面 
                    type:"GET", //请求方式 可换为post  注意验证页面接收方式 
                    data:"user="+$("#user").val(), //取得表文本框数据，作为提交数据 注意前面的 user  此处格式 key=value  其他方式请参考ajax手册 
                    success: function(data) 
                    {  //请求成功时执行操作 
                        $("#chk").html(data); //向ID为chk的元素内添加html代码 
                    } 
                     
                    }); 
            }) 
         
    }) 
    </script> 
    </head> 
    <body> 
     <form id="reg" action="" method="post"> 
     用户名：<input id="user" type="text" /> <span id="chk"></span> 
     </form> 
    </body> 
    </html>

check_user.php 异步通信页面,代码如下:

<?php 
    header("Content-type:text/html;charset=gb2312"); 
     
    //GET方式获取数据（取决于异步提交时提交方式） 
    if($_GET[&#39;user&#39;]) 
    { 
        $user=$_GET[&#39;user&#39;];     
        //此处可进行数据库匹配，本次省略直接判断 
        if($user=="admin") 
        echo "<font color=red>用户名已被注册！</font>"; 
        else 
        echo "<font color=red>用户名可以使用</font>"; 
    }else{} 
     
    //POST方式获取数据（取决于异步提交时提交方式） 
    if($_POST[&#39;user&#39;]) 
    { 
        $user=$_POST[&#39;user&#39;];     
        //此处可进行数据库匹配，本次省略直接判断 
        if($user=="admin") 
        echo "<font color=red>用户名已被注册！</font>"; 
        else 
        echo "<font color=red>用户名可以使用</font>"; 
         
    }else{} 
?>

上面的2种方式分别又存在 post 和 get 两种方式,所以可以说有4种方式选择,应该可以满足普通应用了.

另外关于Ajax 内其他参数例如:请求数据类型,ajax开始操作等等事件,请参考ajax手册,这里不做阐述,较为复杂推荐使用第一种方式.

本文链接:

收藏随意^^请保留教程地址.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：php soap 调用获取返回信息 Next article：缺少 mcrypt 扩展,请检查 PHP 配置与phpmyadmin无法加载

See more

php ajax实现无刷新检测用户名是否可用

Related articles