摘要：HTML代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<p>登录表单</p>
<p>用户名:<input type="text" name="username" class="username"></p>
<p>密 码:<input type="text" name="password" class="password"></p>
<p><button type="button">登录</button></p>
</form>
<script>
let btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
//1、创建xhr对象
let xhr= new XMLHttpRequest();
//2、监听相应状态
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
let p=document.createElement('p');
p.style.color='red';
//设置一个变量，将服务器端返回的值转化成json格式
let json=JSON.parse(xhr.responseText);
// console.log(json);
if(json.status==1){
p.innerHTML=json.msg;
}else if(json.status==0){
p.innerHTML=json.msg;
}
document.forms[0].appendChild(p);//登录成功与否的提示语
btn.disabled=true;//禁用按钮
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled=false;//启用按钮
if(json.status==1){
location.href='inc/admin.php';//登录成功后跳转地址
}
},2000)
}else{
alert('相应失败'+xhr.status);
}
}else{
//图片不停的转动
}
}
//3、设置请求参数
xhr.open('post','inc/check.php',true);
//4、设置请求头部
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5、获取表单数据
let data={
username:document.getElementsByName('username')[0].value,
password:document.getElementsByName('password')[0].value
}
let data_json=JSON.stringify(data);//将json转化成文本
xhr.send('data='+data_json);
}
</script>
</body>
</html>check.php代码:
<?php
$user=json_decode($_POST['data']);
$username=$user->username;
$password=sha1($user->password);
$pdo=new PDO('mysql:host=127.0.0.1;dbname=a','root','root');
$sql="select count(*) from dede_admin where uname='{$username}' and pwd='{$password}'";
$stmt=$pdo->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0)==1){
echo json_encode(['status'=>1,'msg'=>'登录成功，正在跳转...']);
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'帐号或密码错误']);
exit;
}admin.php:
<?php echo'<h2>欢迎来到系统管理后台</h2>';
自己本地有搭建好的数据库，自己建了一个本地的数据库和帐号密码。
第一次体验了一把传说中的html+Ajax+php登录帐号。感觉爽歪歪。
由于对与前端和交互代码不熟悉。表示要多练习几遍。笔记记下来。
感谢老师
批改老师：天蓬老师批改时间：2019-02-11 13:47:41
老师总结：是不是没有你想像的那么困难呢? 其实很简单的, 只要按套路走就行
