用户名:
密 码: 记住
您当前的位置:首页 > 网络编程 > php教程

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

时间:2015-01-23  来源:西部数据  作者:西部数据

在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者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种方式,请任选一种),代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>PHP+Ajax 异步通讯注册验证</title> 
  6. <script type="text/javascript" src="jquery-1.7.1.js"></script> <!--千万别忘记引用jQuery文件,否则无法执行--> 
  7. <script type="text/javascript"
  8. $(function(){ 
  9. //方式一   jQuery(普通应用时推荐,简单易用),代码如下: 
  10.     $("#user").blur(function(){        //文本框鼠标焦点消失事件 
  11.      
  12.         $.get("check_user.php?user="+$("#user").val(),null,function(data)   //此处get方式 可换为post方式按需求调整,其他无需修改使用方式一样 
  13.         { 
  14.             $("#chk").html(data);   //向ID为chk的元素内添加html代码 
  15.         }); 
  16.          
  17.         }) 
  18. //方式二  aJax方式 (比较复杂,如无特殊需求推荐使用方式一),代码如下: 
  19.         $("#user").blur(function(){ 
  20.          
  21.             $.ajax({ 
  22.                      
  23.                 url:"check_user.php"//请求验证页面 
  24.                 type:"GET"//请求方式 可换为post  注意验证页面接收方式 
  25.                 data:"user="+$("#user").val(), //取得表文本框数据,作为提交数据 注意前面的 user  此处格式 key=value  其他方式请参考ajax手册 
  26.                 success: function(data) 
  27.                 {  //请求成功时执行操作 
  28.                     $("#chk").html(data); //向ID为chk的元素内添加html代码 
  29.                 } 
  30.                  
  31.                 }); 
  32.         }) 
  33.      
  34. }) 
  35. </script> 
  36. </head> 
  37. <body> 
  38.  <form id="reg" action="" method="post"
  39.  用户名:<input id="user" type="text" /> <span id="chk"></span> 
  40.  </form> 
  41. </body> 
  42. </html>  

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

  1. <?php 
  2. header("Content-type:text/html;charset=gb2312"); 
  3.  
  4. //GET方式获取数据(取决于异步提交时提交方式) 
  5. if($_GET['user']) 
  6.     $user=$_GET['user'];     
  7.     //此处可进行数据库匹配,本次省略直接判断 
  8.     if($user=="admin"
  9.     echo "<font color=red>用户名已被注册!</font>"
  10.     else 
  11.     echo "<font color=red>用户名可以使用</font>"
  12. }else{} 
  13.  
  14. //POST方式获取数据(取决于异步提交时提交方式) 
  15. if($_POST['user']) 
  16.     $user=$_POST['user'];     
  17.     //此处可进行数据库匹配,本次省略直接判断 
  18.     if($user=="admin"
  19.     echo "<font color=red>用户名已被注册!</font>"
  20.     else 
  21.     echo "<font color=red>用户名可以使用</font>"
  22.      
  23. }else{} 
  24.  
  25. ?> 

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

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

来顶一下
返回首页
返回首页
推荐资讯
WiFi太不安全:7岁女孩11分钟内入侵公共网络 WiFi太不安全:7岁女孩11分钟内入侵近期刚刚发布研究说WiFi网络能获得人们手机里多少私人信息,
不服跑个分?人工智能也出现“刷分”乱象 不服跑个分?人工智能也出现“刷分2014年,人工智能领域突然爆发,成为了科研和科技创业的热门
相关文章
栏目更新
栏目热门