摘要：1. 登录页面(login.html)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax与json进行无刷新表单验证</title></
1. 登录页面(login.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax与json进行无刷新表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form action="">
<p><input type="text" name="username" id="username" placeholder="用户名"></p>
<p><input type="password" name="password" id="password" placeholder="密码"></p>
<p><button type="button" onclick="login()">登录</button></p>
</form>
<script>
function login() {
let btn = document.getElementsByTagName('button')[0];
let username = document.getElementsByName('username')[0];
let password = document.getElementsByName('password')[0];
/*console.log(username.value.length);
if (username.value.length == 0) {
let span = document.createElement('span');
span.style.color = 'red';
span.innerText('用户名不能为空');
document.username.append(span);
}*/
// 1.创建xhr对象
let xhr = new XMLHttpRequest();
// 2.监听响应状态
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let p = document.createElement('p');
p.style.color = 'red';
let json = JSON.parse(xhr.responseText);
if (json.code === 1) {
p.innerHTML = json.msg;
document.forms[0].appendChild(p);
btn.disabled = true;
setTimeout(function () {
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.code == 1) {
location.href = 'inc/admin.php';
}
}, 2000)
}else {
p.innerHTML = json.msg;
document.forms[0].appendChild(p);
btn.disabled = true;
setTimeout(function () {
document.forms[0].removeChild(p);
btn.disabled = false;
return false;
}, 2000)
}
}
};
//3.设置请求参数
xhr.open('post','inc/check.php',true);
//4.设置请求头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//5.发送请求
let data = {
username: username.value,
password: password.value
};
let data_json = JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html>
2.验证代码(check.php)
<?php
//echo json_encode('测试数据');
$user = json_decode($_POST['data']);
$name = trim($user->username);
$password = sha1(trim($user->password));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `name`=:name AND `password`=:password ";
//$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute(['name'=>$name,'password'=>$password]);
$res = $stmt->fetchColumn(0);
if ($res ==1) {
exit(json_encode(['code'=>1,'msg'=>'登录成功,正在跳转...']));
} else {
exit(json_encode(['code'=>0,'msg'=>'邮箱或密码错误,登录失败']));
}
批改老师：查无此人批改时间：2019-05-16 09:09:45
老师总结：完成的不错，json数据可以在不同的编程语言中传递数据。好好练习，继续加油
