实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
.box {
margin: 50px auto;
width: 400px;
height: 300px;
background-color: #efefef;
border: 1px solid lightgray;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form>
<p>邮箱：<input name="email" type="email"></p>
<p>密码：<input name="password" type="password"></p>
<p><button type="button">登录</button></p>
</form>
</div>
<script>
//先获取提交按钮
let btn = document.getElementsByTagName('button')[0];
//下面来写点击登录按钮发生的一些事件，利用Ajax来异步操作
btn.onclick = function () {
//创建xhr对象是Ajax里面的对象,所以要new下它，然后将获取的值保存到xhr里面
let xhr = new XMLHttpRequest();
//监听响应的状态
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {//等于4的就是状态码为就绪的意思所以判断是否等于4
if (xhr.status === 200) {//判断请求状态码是否200，是就是从服务器返回了数据
let p = document.createElement('p');//创建一个新的元素，在返回成功的时候可以创建新的元素
p.style.color = 'red';
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) {
Location.href = 'admin.php';
}
},2000);
}else {
alert('响应失败'+xhr.status);
}
}else {
//请求仍在继续时，这里可以添加一张图片，就像一些视频网站一样，有一个小图
}
}
//设置请求参数，就是提交的方式
xhr.open('post','inc/check.php',true);//默认就是请求参数,url地址，以及方式.这里面就是open(方式，URL地址,方式)
//设置头信息，将内容类型设置成表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求，定义一个数组发送过去
let data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
let data_json = JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
//print_r($_POST['data']);
$user = json_decode($_POST['data']);
//接受由$_POST传过来的参数，[data]是从JSON处理过后传过来的数据
$email =$user->email;
//获取从data中传过来的数据库的email值
$password = sha1($user->password);
//将获取过来的密码进行加密，好跟数据库中的数据进行比较
$pdo = new PDO('mysql:host=localhost;dbname=php','root','root');
//准备一个sql语句来查询数据库中的东西
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if ($stmt->fetchColumn(0) == 1 ) {
//利用fetchColumn来判断是否有数据，有为真（ture）就是1，就等于1，如果等于1就进行判断
echo json_encode(['status'=>1,'msg'=>'登录成功，正在跳转...']);
exit;
}else {
echo json_encode(['status'=>0,'msg'=>'登录失败，邮箱或密码错误...']);
exit;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：在做成功之后，最后就是用户名和密码输入正确，跟数据库里面的一样，但是还是提示用户名或密码错误 ，是怎么回事呢？
以上问题出错的原因是，数据库字段密码设置的长度是24字节，所以在进行sha1处理的时候，长度不够，所以就会出现密码错误的原因。
