abstract：<!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="郵箱/ 手機(jī)號碼/小米ID ">
<input type="password" name="password" id="password" placeholder="密碼">
<button type="button">登錄</button>
</form>
<h6>
<a href="#" style="color: #FF6A00;">手機(jī)短信登錄/注冊</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>小米手機(jī)可打開「設(shè)置」>「小米帳號」掃碼登錄</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">簡體<span>|</span>繁體<span>|</span>English<span>|</span> 常見問題<span>|</span> 隱私政策</p>
<p>小米公司版權(quán)所有-京ICP備10046444-<img src="static/images/ghs.png"> 京公網(wǎng)安備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({ // 參數(shù)必須是對象
type: 'post', //請求類型
url: 'inc/check.php', //請求腳本
//字符串方式請求數(shù)據(jù)
data: 'email='+$('#email').val()+'&password='+$('#password').val(),
dataType: 'json',
success: function(data) {
console.log(data);
if(data.status == 1){ //驗(yàn)證通過
location.href = 'admin.php';
} else {
$('#password')
.after('<span style="color:red;float: left;margin-left: 35px;margin-bottom: 10px; ">賬號或密碼錯(cuò)誤</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]); //將參數(shù)進(jìn)行綁定
//從結(jié)果集進(jìn)行下判斷
if ($stmt->fetchColumn(0) == 1) {
$status = 1;
$message = '驗(yàn)證通過!';
} else {
$status = 0;
$message = '郵箱或密碼錯(cuò)誤~';
}
echo json_encode(['status'=>$status,'message'=>$message]);1、密碼錯(cuò)誤
2、帳號和密碼位數(shù)不夠
3、登錄成功跳轉(zhuǎn)頁面
總結(jié):ajax請求一般就是 1、 //請求方式 type:"GET", 2、文件位置 url:"", 3、返回?cái)?shù)據(jù)格式, dataType: "", 4、請求成功后要執(zhí)行的函數(shù) success: function(data){ }
說明：本來想用php里弄個(gè)json格式的數(shù)組，然后返回到前端，不太熟悉php后端的語法作罷 2.前端做了個(gè)json文件，可以取到數(shù)據(jù)，js語法又不熟悉，如：把input里的帳號密碼與json取出的帳號密碼進(jìn)行判斷，正確跳轉(zhuǎn)，不正確提示。弄了大半天都沒弄好。
最后后端還是用了老師視頻上講的php后端取數(shù)據(jù)庫帳號密碼，根據(jù)post提交過來的數(shù)據(jù)進(jìn)行驗(yàn)證。感覺也學(xué)了好久了，還是自己什么都寫不出。只會(huì)生搬硬套。
真想把后端取數(shù)據(jù)，json格式里取數(shù)據(jù)，存數(shù)據(jù)弄的溜溜的。
Correcting teacher：韋小寶Correction time：2019-01-15 08:59:56
Teacher's summary：寫的很不錯(cuò) 非常棒 注意回調(diào)的數(shù)據(jù)在測試的時(shí)候輸出一下是可以的 但是后面要基礎(chǔ)刪除哦 例如這里的 console.log(data);