abstract:div{width:500px;border:1px solid #666666;border-radius: 4px;margin:0 auto;padding:15px;}<div> <h3>表单验证</h3> <form> <p>
div{width:500px;border:1px solid #666666;border-radius: 4px;margin:0 auto;padding:15px;}
<div>
<h3>表单验证</h3>
<form>
<p>用户名:<input type="text" name="username"></p>
<p>密 码:<input type="password" name="password"></p>
<button type="button">登录</button>
<p class="tip"></p>
</form>
</div>
<script type="text/javascript">
//创建ajax对象
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
let xhr = new XMLHttpRequest();
//绑定事件监听
xhr.onreadystatechange=function(){
if(xhr.readyState===4){//检测就绪状态
if(xhr.status===200){//服务器是否已经返回数据
let p = document.getElementsByClassName('tip')[0];
// p.innerHTML = xhr.responseText;return;
let json_obj = JSON.parse(xhr.responseText);
p.style.color='red';
p.innerHTML = json_obj.msg;
}
}
}
//设置请求参数
xhr.open('post','inc/check.php',true);
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送数据
let data = {
username:document.forms[0].username.value,
password:document.forms[0].password.value
};
//把js对象解析成json字符串
let json_str = JSON.stringify(data);
xhr.send('data='+json_str);
}
</script>
<?php
//将json字符串解析成php对象
$json_obj = json_decode($_POST['data']);
$username = $json_obj->username;
$password = sha1($json_obj->password);
$pdo = new PDO('mysql:host=localhost;dbname=test','root','root');
$sql="SELECT COUNT(*) FROM `user` WHERE `username`='{$username}' AND `password`='{$password}'";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0)==1){
exit(json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']));
}else{
exit(json_encode(['status'=>0,'msg'=>'用户名或密码错误']));
}