实例
<!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>
<h1>用户登陆2</h1>
<form action="admin/check01.php" method="POST">
<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>
<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(){
var request=new XMLHttpRequest();
request.onreadystatechange=function(){
if(this.readyState ===4 && this.status===200){
tips.innerHTML=this.responseText;
}
}
request.open('POST','admin/check01.php');
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
request.send('email='+email.value+'&password='+password.value);
}
email.oninput=function(){
tips.innerHTML='';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例