Ajax native ajax-xhr object that implements the database query whether there is an operation

Reception:

<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>

Backstage:

<?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);




?>

Magic Uncle

Published 252 original articles · won praise 3 · Views 3269

Private letter concerns

Ajax native ajax-xhr object that implements the database query whether there is an operation

Guess you like