Ajax结合PHP实现用户注册无刷新校验用户名是否存在

痛定思痛。 2021-09-18 11:10 258阅读 0赞

第一准备html页面

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>账号注册</title>
    	</head>
    	<body>
    		<h1>账号注册</h1>
    
    		<script>
    
            window.onload=function(){
    		
    		var btn=document.getElementById("btn");
    		
    		btn.onclick=function(){
    			//动态拿到用户输入的username
    			var uname=document.getElementById("username").value;
    			//开始ajax数据校验
    			//创建xhr对象,判断浏览器兼容性
    			var xhr=null;
    			if(window.XMLHttpRequest){
    				xhr=new XMLHttpRequest();
    			}else{
    				
    				xhr=new ActiveXObject("microsoft.XMLHTTP");
    			}		
    			//配置参数 3个 数据请求方式,数据提交文件url路径，true.准备传输
    			xhr.open("get","register.php?username="+uname,true);
    			//开始传输 null固定写法
    			xhr.send(null);
    			//回调函数
    			xhr.onreadystatechange=function(){
    				
    				if(xhr.readyState==4){
    					if(xhr.status==200){
    						//拿到响应的值
    						var result=xhr.responseText;
    						//js给id为result的标签加入内容,内容为php后端拿到的值
    						var result=document.getElementById("result").innerHTML=result;
    					}
    				
    				}
    			}
    		}
    	
    		}
    				
    		</script>
    
    
    		<form action="register.php" method="get">
    			账号：<input type="text" name="username" id="username" />
    			<input type="button" value="点击校验用户名是否存在" id="btn" />
    			<span id="result"></span>
    			<br />
    			密码：<input type="password" name="pwd" />
    			<input type="submit" value="注册" />
    		</form>
    	</body>
    </html>

第二PHP进行模拟数据库校验用户名是否存在

<?php
       //拿到前端的username值
       $uname=$_GET["username"];
       //模拟数据库有"zhangsan"这个账号
       if($uname=="zhangsan"){
    	   //已被注册
    	   echo "username NO!";
    	   
       }else{
    	   //未注册
    	    echo "username OK!";
       }
    
    
    
    ?>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20210724/da6f220a922649b896163f7cba1b9bf9.png