摘要：用户登录的简单验证功能，利用数组来模拟实现（ajax+json）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &nbs
用户登录的简单验证功能，利用数组来模拟实现（ajax+json）
<!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>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" style="margin-top:10px;">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" id="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success">登录</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" id="check">
</div>
</div>
</form>
</div>
</div>
</div>
<script>
let btn = document.getElementsByTagName('button')[0];
//console.log(btn);
btn.onclick = function(){
//1.创建xhr对象 首先第一步 要new一个xhr出来。
let xhr = new XMLHttpRequest();
//2.监听响应状态 onreadystatechange
xhr.onreadystatechange = function(){
//readyState 等于4 为就绪状态
if(xhr.readyState === 4){
//判断响应结果是否为200
if(xhr.status === 200){
//响应成功，通过xhr对象的responseText获取响应文本
//创建元素存放内容时使用
let p = document.createElement('p');
p.style.color = 'red';
//JSON.parse服务器响应字符串数据转化成json对象 console.log(xhr.responseText);
let json = JSON.parse(xhr.responseText);
//利用InnerHTML方式写入到新元素P上
if (json.status === 1) {
p.innerHTML = json.msg;
} else if (json.status === 0) {
p.innerHTML = json.msg;
}
// 将响应文本添加到新元素上
document.getElementById('check').appendChild(p); // 将新元素插入到当前页面中
//将按钮禁用，防止多次点击
btn.disabled = true;
//设置延时2秒钟
setTimeout(function(){
document.getElementById('check').removeChild(p);
btn.disabled = false;
if (json.status === 1) {
location.href = 'admin.php';
}
},2000);
}else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败' + xhr.status);
}
}else{
//不为4 请求一直继续
}
}
//3.设置请求参数
xhr.open('post','demo1.php',true);
//4.设置请求头信息，将内容模拟成表单提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.发送请求信息
let data = {
email: document.getElementById('email').value,
password : document.getElementById('password').value
};
//JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
let data_json=JSON.stringify(data);
xhr.send('data='+data_json);
//xhr.send(null);
}
</script>
</body>
</html>demo1.php
<?php
$arr = array("email"=>"admin@126.com","password"=>"123456");
//print_r($_POST['data']);
//echo $data['email'];
$user = json_decode($_POST['data']);
$email = $user->email;
//$password = sha1($user->password);
$password = $user->password;
if ($arr['email'] == $email && $arr['password'] == $password ) {
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}admin.php
<?php echo "<h3>我是一个后台</h3>";
批改老师：天蓬老师批改时间：2019-01-15 14:24:43
老师总结：ajax交互, 不刷新页面的也可以实现数据更新, ajax重点是在js对象的解析与dom操作
