<!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>
