摘要： <!DOCTYPE html> <html> <head> <title>Ajax原理实线</title> <meta charset="utf-8"> </head> <body> <form accept-charset="
<!DOCTYPE html>
<html>
<head>
<title>Ajax原理实线</title>
<meta charset="utf-8">
</head>
<body>
<form accept-charset="utf-8">
<label>邮箱：</label>
<input type="email" name="email" id="email"><br><br>
<label>密码</label>
<input type="password" name="password" placeholder="" id="password"><br>
<input type="button" name="" value="提交" id='btn'><br>
</form>
<script type="text/javascript">
// 1.创建Ajax对象
// let email = document.getElementById("email");
// let e = email.value
// let password = ;
// console.log(password)
let btn = document.getElementById("btn");
btn.onclick= function(){
let xhr = new XMLHttpRequest();
// 2.启动监听
xhr.onreadystatechange = function () {
if (xhr.readyState=== 4 ){
//请求成功需要操作的内容
if (xhr.status===200) {
// 响应成功
let ps = document.createElement('p');
let enjson = JSON.parse(xhr.responseText); //JSON.parse()方法可以将服务器发送过来的JSON格式解析成JS的对象
if (enjson['status']===1) {
ps.innerHTML=enjson['msg'];
}else if (enjson['status']===0){
ps.innerHTML=enjson['msg'];
}
document.body.appendChild(ps);
setTimeout(function(){ //计时器
location.href='admin.php';
}, 2000)
}else {
// 响应失败
}
}else{
// 如果请求在继续那么可以输出一张图片
}
}
let json = {
email:document.getElementById("email").value,
password:document.getElementById("password").value
}
json = JSON.stringify(json); //将JS对象转为字符串
// 3.发送请求
xhr.open('post', 'check.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //POST要修改请求头
xhr.send("data="+json);//手动添加一个键，拼接json变量的值，发送到服务器
}
</script>
</body>
</html><?php
$data = $_POST['data'];
$data = json_decode($data);
$email = $data->email;
$password = $data->password;
$dbh = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql="SELECT `password`,`email`,`name` FROM `user` WHERE `email`=:email AND `password`=:password";
$stmt = $dbh->prepare($sql);
$stmt->bindparam(':password',$password,PDO::PARAM_STR);
$stmt->bindparam(':email',$email,PDO::PARAM_STR);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC); //由数据返回值，没有返回false
if ($user) {
session_start(); //启动会话
$_SESSION['username']= $user['name']; //生成会话标识。
echo json_encode(['status'=>1,'msg'=>'登陆成功正在跳转']); //json_encode函数将数组格式化为JSON格式。
}else{
echo json_encode(['status'=>0,'msg'=>'登陆失败']);
}
?>
批改老师：天蓬老师批改时间：2019-04-22 10:04:09
老师总结：php诞生时的主要用途, 就是进行服务器端的表单验证的, 所有, 从表单验证来实习, 是一个最佳的办法, 这里面有很多的有趣的知识点...
ajax是从用户体验上, 对表单验证进行处理..., 并不是什么新技术, 只是对已存在的技术一个优化或应用范围的扩展...
