摘要：后台代码： $user = json_decode($_POST['data']); //print_r($_POST);die; $users=[]; $users['email']=$user->email; $users['password']=$user->password; //print_r($users
后台代码：
$user = json_decode($_POST['data']);
//print_r($_POST);die;
$users=[];
$users['email']=$user->email;
$users['password']=$user->password;
//print_r($users);
$arrs=[];
$arrs=[['email'=>'admin@123.php','password'=>'123456'],['email'=>'peter@123.php','password'=>'123456']];
//$arr=['email'=>'admin@123.php','password'=>'123456'];
foreach ($arrs as $arr) {
if ($arr==$users){
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}
}前台代码：
<!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>Document</title>
</head>
<body>
<div>
<h1>用户登录</h1>
<form>
<p>邮箱: <input type="email" name="email"></p>
<p>密码: <input type="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
</div>
<script>
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function () {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
};
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
if (xhr.status === 200) {
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
var p = document.createElement('p'); //创建新元素放返回的内容
p.style.color = 'red';
var 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 {
// http请求仍在继续,这里可以显示一个一直转来转去的图片
}
}
//3.设置请求参数
xhr.open('post','inc/check.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
var data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
// data = 'email='+data.email+'&password='+data.password;
var data_json=JSON.stringify(data);
xhr.send('data='+data_json);
};
</script>
</body>
</html>
批改老师：查无此人批改时间：2019-05-16 09:09:55
老师总结：完成的不错，json数据可以在不同的编程语言中传递数据。好好练习，继续加油
