Ajax 原生ajax-xhr对象实现数据库查询是否存在操作

蔚落 2021-07-25 02:45 437阅读 0赞

**前台：**

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="jquery-3.4.1.js"></script>
    </head>
    <body>
    	<label for='username'>
    		<span >用户名</span><input type="text" class='username' id='username'>
    	</label>
    	<br/>
    	<label for="password">
    		<span >密码:</span><input type="text" class='password' id='password'>
    	</label>
    	<br/>
    	<button>post请求</button>
    	<script>
    		var usernameInput=document.querySelector(".username");
    		var passwordInput=document.querySelector(".password");
    
    		var btn=document.querySelector('button');
    		btn.onclick=function()
    		{ 
    			//兼容性写法
    			if(window.XMLHttpRequest)
    			{ 
    				var xhr=new XMLHttpRequest();
    			}else{ 
    				var xhr=new ActiveXObject();
    			}
    
    			//监听请求是否成功
    			xhr.onreadystatechange=function()
    			{ 
    				//通过readyState属性的值，判断当前请求状态
    				if(xhr.readyState==4)
    				{ 
    					console.log("已接受");
    					//通过status属性来判断前台接收状态
    					if(xhr.status==200)
    					{ 
    					//此时表明真正接收到了数据
    						console.log(xhr.statusText);
    						//将后台返回的json字符串转化成js对象
    						var jsonData=JSON.parse(xhr.responseText);
    						//对后台返回的数据进行判断
    						if(jsonData.info==1)
    						{ 
    							console.log('已存在');
    						}else{ 
    							console.log('无用户');
    						}
    					
    					}
    				};
    
    
    			};				
    
    				//构建表单数据
    				var datas=new FormData();
    				datas.append('uname',usernameInput.value);
    				datas.append('upwd',passwordInput.value);
    
    				//发送post位置
    				xhr.open('post','3.php',true);
    				//开始发送
    				xhr.send(datas);
    
    
    		}
    
    	</script>
    
    </body>
    
    </html>

--------------------

**后台：**

<?php
    	//获取前台数据
    	$username=$_POST['uname'];
    	$userpwd=$_POST['upwd'];
    	$flag=false;
    	$success=array('mes'=>'ok');
    
    	//连接数据库
    	$pdo=new PDO('mysql:host=localhost;dbname=day2db','root','dyl123');
    
    	$pdo->exec("set names utf8");
    	$pdo->query('set names utf8');
    
    	//查询数据库
    	$sql="select * from userinfo";
    	$pre=$pdo->prepare($sql);
    	$pre->execute();
    
    	$arr=[];
    	$pre->bindColumn(1,$uname);
    	$pre->bindColumn(2,$pwd);
    	for($i=0;$row=$pre->fetch(PDO::FETCH_COLUMN);$i++)
    	{ 
    		$arr[$i]=array('uname'=>$uname,'pwd'=>$pwd);
    	}
    
    	//验证用户是否存在
    	for($j=0;$j<count($arr);$j++)
    	{ 
    		if($arr[$j]['uname']==$username)
    		{ 
    			if($arr[$j]['pwd']==$userpwd)
    			{ 
    				$success['info']=1;
    				$flag=true;
    			}
    		}
    		if(!$flag)
    		{ 
    			$success['info']=0;
    		}
    	}
    
    	//返回前台数据
    	 echo json_encode($success);
    
    
    
    
    ?>