实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 制作登陆表单</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" onsubmit="return true"> <!--onsubmit="return false"点击提交按钮失效-->
<p>
<!-- 邮箱-->
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<!-- 密码-->
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<!-- 提交按钮-->
<button id="submit" type="button">提交</button>
<span id="result"></span>
</p>
</form>
<script>
//1、获取需要的元素
var form1=document.forms.namedItem('login');
var email=document.getElementsByName('email')[0];
var err_email=document.getElementById('error_email');
var password=document.getElementById('password');
var err_password=document.getElementById('error_psw');
var submit1=document.getElementById('submit');
var result=document.getElementById('result');
//2、给按钮添加点击事件,obj为主函数
submit1.addEventListener('click',obj,false);
//主函数只起调用功能
function obj() {
//(1)非空验证
var user = checked(email,err_email,password,err_password);
//(2)ajax验证,把email,password放在uesr对象中进行ajax判断,下边是三元运算符，如果user为真，就运行ajax，否则运行false
return user ? ajax(user,result) : false;
}
//（1）非空验证，用 .length !==0 来验证
function checked(new_email,err_email,new_password,err_password) {
var email1 = new_email.value.trim();
var password1 = new_password.value.trim();
//慎用return 用错了直接就不执行下一步了。没有判断条件的不能用return。else 下不返回数值，返回后边的就不运行了
if (email1.length === 0) {
err_email.innerText = '邮箱不能为空';
email.focus();
return false;
} else{
err_email.innerText = '√';
err_email.style.color='green';
}
if (password1.length === 0) {
err_password.innerText = '密码不能为空';
password.focus();
return false;
} else {
err_password.innerText = '√';
err_password.style.color='green';
}
return{
email:email1, //email:email1 给主函数返回一个对象，方便后边的user.email调用。email可以是任何值，跟上边没关系。
password:password1
}
}
function ajax(user,result) {
// 1、创建对象
var resquest = new XMLHttpRequest(); //大写 X
// 2、监听响应状态
resquest.onreadystatechange=function(){
if(resquest.readyState===4){
console.log(resquest.responseText);
var zh=JSON.parse(resquest.responseText);
if (zh.status===1){
result.style.color='red';
result.innerHTML=zh.message;
}else if(zh.status===2){
result.style.color='red';
result.innerHTML=zh.message;
}
else if(zh.status===3){
result.style.color='green';
result.innerHTML=zh.message;
}
}
return false;
};
// 3、POST初始化请求文件
resquest.open('post','admin/check.php',false);
// 4、POST头文件
resquest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 5、POST 发送请求
var data = 'email=' + user.email +'&password=' + user.password;
resquest.send(data);
}
// input: 当用户修改错误数据时, 提示信息应该消失
form1.email.addEventListener('input', function (){
err_email.innerText = ''; // 清除邮箱错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
form1.password.addEventListener('input', function (){
err_password.innerText = ''; // 清除密码错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
</script>
</body>
</html>
**********************一下是PHP端的数据**************************
<?php
//print_r($_POST);
$email = $_POST['email'];
$password = $_POST['password'];
$emailList = Array('admin@php.cn', 'admin@html.cn', 'admin@py.cn');
$pwd = md5('123456');
if (!in_array($email, $emailList)) {
// echo '<span style="color: red">邮箱不正确</span>';
// 从服务器返回json格式的数据,其实就是一个字符串,默认必须是UTF8编码
// json_encode: 将php数组或数组转为json格式字符串
echo json_encode(['status'=>1, 'message'=>'邮箱不正确']);
} else if (md5($password) !== $pwd) {
// echo '<span style="color: red">密码不正确</span>';
echo json_encode(['status'=>2, 'message'=>'密码不正确']);
} else {
// echo '<span style="color: green">验证通过,正在跳转...</span>';
echo json_encode(['status'=>3, 'message'=>'验证通过正在跳转']);
}运行实例 »
点击 "运行实例" 按钮查看在线实例