摘要：获取按钮元素并创建点击事件。创建一个监听对象，如果监听对象的状态返回值是4表示请求已经完成并响应就绪，再判断一下如果返回的值是200说明查询成功。然后新建一个p标签用于输出查询状态。var json = JSON.parse(xhr.responseText);是把从服务器发送过来的信息转换成js格式。如果查询的信息返回值是1说明查询到了对应的信息直接输出之前设定好的值，反之则依然。然后把登录信息
获取按钮元素并创建点击事件。
创建一个监听对象，如果监听对象的状态返回值是4表示请求已经完成并响应就绪，再判断一下如果返回的值是200说明查询成功。然后新建一个p标签用于输出查询状态。var json = JSON.parse(xhr.responseText);是把从服务器发送过来的信息转换成js格式。如果查询的信息返回值是1说明查询到了对应的信息直接输出之前设定好的值，反之则依然。然后把登录信息用刚才的p标签发送到页面上再禁用按钮功能，设置定时器对页面进行重定位跳转。
设置请求方式为post，后台路径是include下的check.php文件，由于发送的是form表单请求，所以表单头要修改一下xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
把需要发送验证对象的value值以字面量形式赋值给data，然后把data以json方式转换一下数据赋值给data_json,由于直接发送的data_json数据没有下标，下面的data就是加上下标进行发送方便查询
xhr.send('data='+data_json);database.php配置一下数据库的信息
在check.php里载入数据库信息文件并赋值给$db，使用PDO方式连接数据库，使用json_decode($_POST['data'])方法接收post发送过来的数据并赋值给user，实例化并赋值邮箱和密码字段并进行数据库查询。
如果查询到的数据==1说明结果为真，那么就echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
输出到前端页面，前端页面接收到数据后跳转指定的admin.php页面。
总结写代码过程中的错误：前台页面如果使用的是div而不是form，并且js里使用的是div而不是forms的话查询是没有任何响应的，并且在验证的php页面里不能有输出打印标签，否则前台也不显示。数据库配置文件需要使用return方式返回，并且数组的[]最后要加；分号结尾。
前台代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单提交系统</title>
<style>
*{
padding: 0;
margin: 0;
font-size: 14px;
}
form{
width: 260px;
margin:130px auto;
}
p{
margin: 20px 0;
}
p:first-child{
text-align: center;
font-weight: bold;
font-size: 22px;
}
p:last-child{
text-align: center;
}
</style>
</head>
<body>
<form>
<p>账户登录系统</p>
<p>
<label>邮箱：</label>
<input type="email" name="email">
</p>
<p>
<label>密码：</label>
<input type="password" name="password">
</p>
<p><button type="button">登录</button></p>
</form>
<SCRIPT>
// 获取按钮
let btn = document.getElementsByTagName('button')[0];
// 创建按钮点击事件
btn.onclick = function (){
// 1.创建监听对象
let xhr = new XMLHttpRequest();
// 2.监听响应状态
xhr.onreadystatechange = function () {
// 如果获取到的返回值是4说明配置正确
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xhr.readyState === 4) {
// 返回200表示查询成功
if (xhr.status === 200) {
let p = document.createElement('p');
p.style.color = 'red';
// .responseText把服务器发送的信息提取出来使用JSON.parse把数据转换成js对象格式。
var json = JSON.parse(xhr.responseText);
// 从后台传递过来的数据如果查询到是1说明有数据如果是0说明没有数据内容
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;
// 设置定时器，让提示内容显示2秒跳转。
setTimeout(function () {
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.status == 1) {
location.href = 'admin.php';
}
}, 2000);
} else {
// 响应失败的提示
alert('响应失败' + xhr.status);
}
} else {
}
}
// 设置一下请求方式以及后台文件
xhr.open('post','include/check.php',true);
// 这里需要修改表单头提交信息欺骗一下浏览器
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求给后台
let data = {
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
}
// 把data以json字符串方式发送给服务器
let data_json = JSON.stringify(data);
// 由于直接发送的data_json数据没有下标，下面的data就是加上下标进行发送方便查询
xhr.send('data='+data_json);
}
</SCRIPT>
</body>
</html>后台验证页面代码：
<?php
// 数据库连接参数
$db = require 'database.php';
// 配置数据源DSN信息
$dsn = "{$db['type']}:host={$db['host']};dbname={$db['dbname']}";
// 连接数据库
try {
$pdo = new PDO($dsn, $db['username'], $db['password']);
} catch (PDOException $e) {
die('Connection Failed: ' . $e->getMessage());
}
//测试一下是否能接收到数据
$user = json_decode($_POST['data']);
$email = $user->email;
$password = $user->password;
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if ($stmt->fetchColumn(0) == 1) {
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}数据库配置代码：
<?php // 数据库连接参数 return [ 'type' => 'mysql', 'host' => 'localhost', 'dbname' => 'user', 'username' => 'root', 'password' => 'root', ];
批改老师：查无此人批改时间：2019-04-23 13:49:51
老师总结：完成的不错。ajax用处比较大。特别是手机的列表页，上拉加载更多。继续加油。
