关于Ajax-9.13

用户登录验证

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<form>
	<h1>登录</h1>
	<p>姓名：<input type="name" name="name"></p>
	<p>密码：<input type="password" name="password"></p>
	<p><button type="button">提交</button></p>
</form>
	<script>
	let btn = document.getElementsByTagName('button')[0];
	btn.onclick = function(){
		
		//1.创建xhr对象
		let xhr = new XMLHttpRequest();
		
		//2.监听响应状态
		xhr.onreadystatechange = function(){
			
			//检测是否准备就绪
			if(xhr.readyState === 4){
				
				//判断响应结果
				if(xhr.status === 200){
					//响应成功
					let p = document.createElement('p');
					p.style.color = 'red';
					//将从服务端返回的数据变为js对象
					let json = JSON.parse(xhr.responseText);
				
                    if (json.status === 1) {
                        p.innerHTML = json.msg;

                    } else if (json.status == 0) {
                        p.innerHTML = json.msg;
                    }
					
					//将响应文本添加到新元素上
					document.forms[0].appendChild(p);
					btn.disabled = true;//禁用掉按钮
					
					//定时器
					setTimeout(function(){
						document.forms[0].removeChild(p);
						btn.disabled = false;
						if(json.status == 1){
							alert('欢迎登录');
						}
					},1000)//2s
					
					
				}else{
					//响应失败
					alert('响应失败'+xhr.status);
				}
			}else{
				//alert('http请求仍在继续');
			}
		}
		
	//3.设置请求参数
	xhr.open('post','check.php',true);
	
	//4.设置头信息
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	
	let date = {
		name: document.getElementsByName('name')[0].value,
		password: document.getElementsByName('password')[0].value
		
	};
	
	//5.发送请求
	let date_json = JSON.stringify(date);
	xhr.send('date='+date_json);
	

		
	}

</script>
</body>
</html>

运行实例 »

check.php

实例

<?php

//将json转为php对象
$user = json_decode($_POST['date']);

$name = $user->name;
$password = $user->password;

$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql = "SELECT * FROM `admin` WHERE `name`='{$name}' AND `password`='{$password}'";

$stmt = $pdo->prepare($sql);
$stmt->execute();
if($stmt->rowcount()){
	echo json_encode(['status'=>1,'msg'=>'登录成功，正在跳转...']);
	exit;
}else{
	echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误']);
	exit;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

Ajax工作原理和完整流程：

YD4XSCN68XVO}0Y]O@ET1RA.png

个人总结：

Ajax主要就是记住几个步骤。

method为get，send为null;method为post，send为具体请求，且需要设置头信息；

实例

实例

相关文章