Ajax+PHP动态验证注册用户名是否可用

一个基础都不太熟的小菜鸟要搞些东西有时候还真挺不容易,这边就注册用户时即时检查用户名是否可用来简单的学学ajax吧。

去参考其他CMS开源系统中的代码,太过繁杂,于是自己找了些资料整理了一个简单的例子

参考资料 《Ajax+PHP程序设计实战详解》,位于第九章的例子

主要就是将文件中的检测修改为 查询数据库

多的不说直接上代码吧,需要的可以多看下注释 

Login.html 文件如下

  
  
  
  
  1. <html> 
  2. <head> 
  3. <title>用户注册</title> 
  4. <script type="text/javascript"> 
  5. var xmlHttp; 
  6. function createXMLHttpRequest() 
  7.     //在IE下创建XMLHttpRequest对象 
  8.     try 
  9.     { 
  10.         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  11.     } 
  12.     catch(e) 
  13.     {        
  14.     try 
  15.     { 
  16.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  17.     }  
  18.     catch(oc) 
  19.     { 
  20.         xmlHttp = null
  21.     } 
  22.     } 
  23.     //在Mozilla和Safari等非IE浏览器下创建XMLHTTPRequest对象 
  24.     if(!xmlHttp && typeof XMLHttpRequest != "undefined")  
  25.     { 
  26.         xmlHttp = new XMLHttpRequest(); 
  27.     } 
  28.     return xmlHttp; 
  29. //方式请求 
  30. function startRequest() 
  31.     //获取用户输入的信息 
  32.     var UserID = document.getElementById("UserID").value; 
  33.     //输入的用户名是否为空 
  34.     if(UserID!="") 
  35.     { 
  36.         //创建XMLHttpRequest对象 
  37.         createXMLHttpRequest(); 
  38.         var url = "Login.php?UserID="+encodeURI(UserID); //指定url 
  39.         xmlHttp.open("GET",url,true); 
  40.         xmlHttp.onreadystatechange = handleStateChange;  //指定回调函数 
  41.         xmlHttp.send(null);   
  42.     } 
  43.     else 
  44.     { 
  45.         alert("请填写您的用户名!"); 
  46.     } 
  47. function handleStateChange() 
  48.     if(xmlHttp.readyState<4
  49.     { 
  50.         span.innerHTML="正在读取数据..."
  51.     } 
  52.  
  53.     if(xmlHttp.readyState==4) 
  54.     { 
  55.         if(xmlHttp.status == 200)  
  56.         { 
  57.             span.innerHTML=xmlHttp.responseText; 
  58.         } 
  59.         else{ 
  60.             alert("错误,请求页面异常!"); 
  61.         } 
  62.     } 
  63. }  
  64. </script> 
  65. </head> 
  66. <body> 
  67. <form action="#"> 
  68. <center> 
  69. <h3>Ajax+php验证用户名是否可用</h3> 
  70. <table> 
  71. <tr> 
  72. <td>用户名:  <input type="text" name="UserID" id="UserID" onchange="startRequest()" /> 
  73. <span id="span"></span></td> 
  74. </tr> 
  75. <tr> 
  76. <td>密&nbsp;&nbsp;码:   <input type="text" name="Pwd" id="Pwd"/></td> 
  77. </tr> 
  78. <tr> 
  79. <td> 
  80. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  81. <input type="button" name="Reg" id="Reg" value="注册"/> 
  82. <input type="button" name="Log" id="Log" value="登录"/> 
  83. </td> 
  84. </tr> 
  85. </table> 
  86. </center> 
  87. <form>  
  88. </body> 
  89. </html> 

Login.php文件源码如下

  
  
  
  
  1. <?php 
  2. //设置PHP的显示语言 
  3. header('Content-Type:text/html;charset=UTF-8'); 
  4. //让程序先等待一秒 
  5. sleep(1);  
  6. //获取输入的用户名 
  7. $tmp=$_GET["UserID"]; 
  8. $db_host="localhost"
  9. $db_name="canphp"
  10. $db_username="root"
  11. $db_password="rootpass"
  12. $link = mysql_connect($db_host$db_username,$db_password ) or  die ('Can\'t connet db!' . mysql_error()); 
  13. mysql_select_db($db_name$linkor die ('Can\'t select db : ' . mysql_error()); 
  14. $query="select * from cp_user where username='$tmp'"
  15. $result = mysql_query($queryor  die ($query.mysql_error()); 
  16. $rows=mysql_num_rows($result); 
  17. if($rows>0) 
  18. { //存在记录
  19.    echo "用户名已存在";  
  20. }else
  21.   echo("还没有被注册!");  
  22. }  
  23. ?> 

文件中的部分信息需要按需修改下,如服务端处理文件中的数据库及表信息

先记录到这边吧,具体的原理也还不太懂,以后有用到 理解了再做补充 :-)

 

你可能感兴趣的:(Ajax,PHP,注册,休闲,动态检测)