<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login-Ajax前后台交互</title>
<style type="text/css">
body,ul,li,span,h2{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 460px;
height: 260px;
background: lavender;
border-radius: 5px;
margin:15% 0 0 30%;
}
h2{
width: 100%;
height: 40px;
text-align: center;
font-weight: 400;
color: #FE7E00;
margin-top: 20px;
}
ul{
padding: 5px 0px 10px 0px;
}
ul li{
width: 98%;
height: 40px;
line-height: 40px;
padding-left: 2%;
margin-bottom: 20px;
}
ul li b{
color: #ff5a5a;
}
input{
width: 220px;
height: 38px;
text-indent: 1em;
border: 1px solid #E8E8E8;
outline: none;
margin-left: 30px;
}
button{
width: 222px;
height: 40px;
border: none;
background: #FE7E00;
color: #fff;
margin-left: 80px;
}
</style>
</head>
<body>
<ul>
<h2>用户登陆</h2>
<li><b>*</b>用户名:<input type="text" name="userName"><span></span></li>
<li> <b>*</b>密 码:<input type="password" name="password"><span></span></li>
<li><button>登陆</button></li>
</ul>
<script>
//获取用户名
var user = document.getElementsByName('userName')[0]
var password = document.getElementsByName('password')[0]
//给用户名控件添加blur事件,失去焦点时触发
user.onblur = function () {
//1.创建ajax对象
var xhr = new XMLHttpRequest()
//2. 监听ajax响应事件
xhr.onreadystatechange = function () {
//响应成功
if (xhr.readyState == 4) {
user.nextSibling.innerHTML = this.responseText
}
}
//3. 初始化ajax请求
//创建查询字符串(查询参数)
//验证用户名
var data = '?userName='+user.value
xhr.open('get','data.php'+data, true)
//4.发送请求
xhr.send(null)
}
password.onblur = function () {
//1.创建ajax对象
var xhr = new XMLHttpRequest()
//2. 监听ajax响应事件
xhr.onreadystatechange = function () {
//响应成功
if (xhr.readyState == 4) {
password.nextSibling.innerHTML = this.responseText
}
}
//3. 初始化ajax请求
//创建查询字符串(查询参数)
//验证用户名和密码
var data = '?password='+ password.value
xhr.open('get','data.php'+data, true)
//4.发送请求
xhr.send(null)
}
document.getElementsByTagName('button')[0].onclick = function () {
alert('登陆成功~~')
}
</script>
</body>
</html>
---------------------以下是php文件内容------------------------------------------
<?php
$userName = isset($_GET['userName']) ? $_GET['userName'] : null;
$userList = ['admin', 'root', 'fuck'];
if ($userName !== null) {
if (in_array($userName, $userList)) {
// echo '用户名重复';
echo '<span style="color:red;margin-left:20px;">用户名已重复！</span>';
} else {
echo '用户名可用';
}
}
$password = isset($_GET['password']) ? $_GET['password'] : null;
if ($password !== null) {
if (strlen($password) >= 6) {
echo '密码符合要求';
} else {
// echo '密码不符合要求';
echo '<span style="color:red">密码不符合要求</span>';
}
}
