![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
用户登录验证
<!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](https://img.php.cn//upload/image/674/201/615/1537687662976586.png "1537687662976586.png")
个人总结：
Ajax主要就是记住几个步骤。
method为get，send为null;method为post，send为具体请求，且需要设置头信息；
