摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城登录页</title> <link rel="shortcut icon" type="ima
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城登录页</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<script src="static/js/jq_3.3.1_mi.js"></script>
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div>
<a href="./index.html"><img src="static/images/5.png"></a>
</div>
<div>
<div>
<div>
<div>
<p style="color:#ff6700;" id="regTabs_0" onclick="ChangeReg('0','register_',1)">账号登录</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div></div>
<div id="register_0">
<form>
<input type="text" name="email" id="email" placeholder="邮箱/ 手机号码/小米ID ">
<input type="password" name="password" id="password" placeholder="密码">
<button type="button">登录</button>
</form>
<h6>
<a href="#" style="color: #FF6A00;">手机短信登录/注册</a>
<span>
<a href="#">立即注册</a> | <a href=""> 忘记密码？</a>
</span>
</h6>
<div >
<p>其他方式登录</p>
<ul>
<li style="margin-right: 35px;" ><i class="fa fa-qq"></i> </li>
<li style="margin-right: 35px;" ><i class="fa fa-weibo"></i> </li>
<li style="margin-right: 35px;" ><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-weixin"></i> </li>
</ul>
</div>
</div>
<div style="display:none;" id="register_1" >
<img src="static/images/下载.png">
<p>使用<span style="color:#FF6700; ">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span> 常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
<script type="text/javascript">
function ChangeReg(divId,divName,Count) {
for (var i=0; i <=Count; i++) {
document.getElementById(divName+i).style.display="none"
}
document.getElementById(divName+divId).style.display="block"
if(divId==0){
document.getElementById('regTabs_0').style.color='#ff6A00'
document.getElementById('regTabs_1').style.color='#757575'
}
if(divId==1){
document.getElementById('regTabs_0').style.color='#757575'
document.getElementById('regTabs_1').style.color='#ff6A00'
}
}
</script>
<script>
$('button').click(function(){
if ($('#email').val().length < 5) {
$('#email').after('<span style="color:red;float: left;margin-left: 35px;margin-bottom: 10px; ">帐号不可以少于5位</span>').next().fadeOut(2000);
$('#email').focus();
return false;
}
if ($('#password').val().length < 6) {
$('#password').after('<span style="color:red;float: left;margin-left: 35px;margin-bottom: 10px; ">密码不能少于6位</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
$.ajax({ // 参数必须是对象
type: 'post', //请求类型
url: 'inc/check.php', //请求脚本
//字符串方式请求数据
data: 'email='+$('#email').val()+'&password='+$('#password').val(),
dataType: 'json',
success: function(data) {
console.log(data);
if(data.status == 1){ //验证通过
location.href = 'admin.php';
} else {
$('#password')
.after('<span style="color:red;float: left;margin-left: 35px;margin-bottom: 10px; ">账号或密码错误</span>')
.next()
.fadeOut(5000);
}
}
});
});
</script>
</body>
</html>check.php
<?php
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email AND `password`= :password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]); //将参数进行绑定
//从结果集进行下判断
if ($stmt->fetchColumn(0) == 1) {
$status = 1;
$message = '验证通过!';
} else {
$status = 0;
$message = '邮箱或密码错误~';
}
echo json_encode(['status'=>$status,'message'=>$message]);1、密码错误
2、帐号和密码位数不够
3、登录成功跳转页面
总结:ajax请求一般就是 1、 //请求方式 type:"GET", 2、文件位置 url:"", 3、返回数据格式, dataType: "", 4、请求成功后要执行的函数 success: function(data){ }
说明：本来想用php里弄个json格式的数组，然后返回到前端，不太熟悉php后端的语法作罢 2.前端做了个json文件，可以取到数据，js语法又不熟悉，如：把input里的帐号密码与json取出的帐号密码进行判断，正确跳转，不正确提示。弄了大半天都没弄好。
最后后端还是用了老师视频上讲的php后端取数据库帐号密码，根据post提交过来的数据进行验证。感觉也学了好久了，还是自己什么都写不出。只会生搬硬套。
真想把后端取数据，json格式里取数据，存数据弄的溜溜的。
批改老师：韦小宝批改时间：2019-01-15 08:59:56
老师总结：写的很不错 非常棒 注意回调的数据在测试的时候输出一下是可以的 但是后面要基础删除哦 例如这里的 console.log(data);
