Ajax+PHP動態驗證註冊用戶名是否可用

時間 2021-08-15

標籤 javascript php html java mysql ajax sql 數據庫瀏覽器 ide 欄目 Ajax 简体版

原文原文鏈接

一個基礎都不太熟的小菜鳥要搞些東西有時候還真挺不容易，這邊就註冊用戶時即時檢查用戶名是否可用來簡單的學學ajax吧。javascript

去參考其餘CMS開源系統中的代碼，太過繁雜，因而本身找了些資料整理了一個簡單的例子php

參考資料《Ajax+PHP程序設計實戰詳解》，位於第九章的例子html

主要就是將文件中的檢測修改成查詢數據庫java

多的不說直接上代碼吧，須要的能夠多看下注釋 mysql

  
  
           
  
  
   
   
            
   
   <html> 
   
   
            
   
   <head> 
   
   
            
   
   <title>用戶註冊</title> 
   
   
            
   
   <script type="text/javascript"> 
   
   
            
   
   var xmlHttp; 
   
   
            
   
   function createXMLHttpRequest() 
   
   
            
   
   { 
   
   
            
   
       //在IE下建立XMLHttpRequest對象 
   
   
            
   
       try 
   
   
            
   
       { 
   
   
            
   
           xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
   
   
            
   
       } 
   
   
            
   
       catch(e) 
   
   
            
   
       {        
   
   
            
   
       try 
   
   
            
   
       { 
   
   
            
   
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   
   
            
   
       }  
   
   
            
   
       catch(oc) 
   
   
            
   
       { 
   
   
            
   
           xmlHttp = null; 
   
   
            
   
       } 
   
   
            
   
       } 
   
   
            
   
       //在Mozilla和Safari等非IE瀏覽器下建立XMLHTTPRequest對象 
   
   
            
   
       if(!xmlHttp && typeof XMLHttpRequest != "undefined")  
   
   
            
   
       { 
   
   
            
   
           xmlHttp = new XMLHttpRequest(); 
   
   
            
   
       } 
   
   
            
   
       return xmlHttp; 
   
   
            
   
   } 
   
   
            
   
   //方式請求 
   
   
            
   
   function startRequest() 
   
   
            
   
   { 
   
   
            
   
       //獲取用戶輸入的信息 
   
   
            
   
       var UserID = document.getElementById("UserID").value; 
   
   
            
   
       //輸入的用戶名是否爲空 
   
   
            
   
       if(UserID!="") 
   
   
            
   
       { 
   
   
            
   
           //建立XMLHttpRequest對象 
   
   
            
   
           createXMLHttpRequest(); 
   
   
            
   
           var url = "Login.php?UserID="+encodeURI(UserID); //指定url 
   
   
            
   
           xmlHttp.open("GET",url,true); 
   
   
            
   
           xmlHttp.onreadystatechange = handleStateChange;  //指定回調函數 
   
   
            
   
           xmlHttp.send(null);   
   
   
            
   
       } 
   
   
            
   
       else 
   
   
            
   
       { 
   
   
            
   
           alert("請填寫您的用戶名!"); 
   
   
            
   
       } 
   
   
            
   
   } 
   
   
            
   
   function handleStateChange() 
   
   
            
   
   { 
   
   
            
   
       if(xmlHttp.readyState<4) 
   
   
            
   
       { 
   
   
            
   
           span.innerHTML="正在讀取數據..."; 
   
   
            
   
       } 
   
   
            
   
    
   
   
            
   
       if(xmlHttp.readyState==4) 
   
   
            
   
       { 
   
   
            
   
           if(xmlHttp.status == 200)  
   
   
            
   
           { 
   
   
            
   
               span.innerHTML=xmlHttp.responseText; 
   
   
            
   
           } 
   
   
            
   
           else{ 
   
   
            
   
               alert("錯誤，請求頁面異常!"); 
   
   
            
   
           } 
   
   
            
   
       } 
   
   
            
   
   }  
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
   <body> 
   
   
            
   
   <form action="#"> 
   
   
            
   
   <center> 
   
   
            
   
   <h3>Ajax+php驗證用戶名是否可用</h3> 
   
   
            
   
   <table> 
   
   
            
   
   <tr> 
   
   
            
   
   <td>用戶名:  <input type="text" name="UserID" id="UserID" onchange="startRequest()" /> 
   
   
            
   
   <span id="span"></span></td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
   <td>密&nbsp;&nbsp;碼:   <input type="text" name="Pwd" id="Pwd"/></td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
   <td> 
   
   
            
   
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   
   
            
   
   <input type="button" name="Reg" id="Reg" value="註冊"/> 
   
   
            
   
   <input type="button" name="Log" id="Log" value="登陸"/> 
   
   
            
   
   </td> 
   
   
            
   
   </tr> 
   
   
            
   
   </table> 
   
   
            
   
   </center> 
   
   
            
   
   <form>  
   
   
            
   
   </body> 
   
   
            
   
   </html>

  
  
           
  
  
   
   
            
   
   <?php 
   
   
            
   
   //設置PHP的顯示語言 
   
   
            
   
   header('Content-Type:text/html;charset=UTF-8'); 
   
   
            
   
   //讓程序先等待一秒 
   
   
            
   
   sleep(1);  
   
   
            
   
   //獲取輸入的用戶名 
   
   
            
   
   $tmp=$_GET["UserID"]; 
   
   
            
   
   $db_host="localhost"; 
   
   
            
   
   $db_name="canphp"; 
   
   
            
   
   $db_username="root"; 
   
   
            
   
   $db_password="rootpass"; 
   
   
            
   
   $link = mysql_connect($db_host, $db_username,$db_password ) or  die ('Can\'t connet db！' . mysql_error()); 
   
   
            
   
   mysql_select_db($db_name, $link) or die ('Can\'t select db : ' . mysql_error()); 
   
   
            
   
   $query="select * from cp_user where username='$tmp'"; 
   
   
            
   
   $result = mysql_query($query) or  die ($query.mysql_error()); 
   
   
            
   
   $rows=mysql_num_rows($result); 
   
   
            
   
   if($rows>0) 
   
   
            
   
   { //存在記錄
   
   
            
   
      echo "用戶名已存在";  
   
   
            
   
   }else{ 
   
   
            
   
     echo("尚未被註冊！");  
   
   
            
   
   }  
   
   
            
   
   ?>