abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理与应用</title>
</head>
<body>
<h2>用户登录</h2>
<form action="admin/check01.php" method="GET">
<p>
<label for="email">邮箱:</label>
<input type="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<button>登录</button>
<!-- 占位符:显示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>
<!-- 异步Ajax验证 -->
<script>
// 获取表单对象与控件
var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
// 验证邮箱
email.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();
//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}
//3. 设置请求参数
request.open('get', 'admin/check01.php', true);
//4. 发送请求
request.send();
}
// 用户修改信息时,清空提示信息
email.oninput = function () {
tips.innerHTML = '';
}
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
} else {
tips.innerHTML = '邮箱和密码不能为空';
}
return false;
}
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-03-18 09:27:50
Teacher's summary：完成的不错。ajax是页面最常用的请求。 可以在不刷新页面的前提下，更新页面数据。