<!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格式里取数据,存数据弄的溜溜的。