实现功能:登录与后台进行交互
逻辑关系:先判断两次输入密码是否相同,不相同就用else(前端干的活),这个密码只传给后台一个,所以在#var psd = $(’#mima2’).val(); 的时候只写出来一个mima就行.
之后是
在里边写相同里Ajax(包括成功函数和出错函数),在成功函数里边写是不是后台的数据并且判断类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆\</title>
<script src="./jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="yyy.css">
<script>
//function box-btn()
//{
// var j=document.getElementById('box-one active');
// var l=document.getElementById('box-one');
// if(j==l)
// {
// }
// else
// (密码输入错误)
//}
$(function() {
$("#login").click(
function() {
var account = $('#user').val();
var psd = $('#mima2').val();
var oPtt = $('#user').val();
var oBtn = $('#box-btn').val();
var oPas1 = $('#mima1').val();
var oPas2 = $('#mima2').val();
console.log(psd)
console.log(account)
if (oPas1 == oPas2) {
//if (oPas1.val() == oPas2.val())重复错误
$.ajax({
url: 'http://47.94.12.165:8889/login', //后台给的
type: 'post',
//async:true,
data: {
'username': account,
'password': psd
},
success: function(a) {
console.log(a)
if (a == "登录成功!")
window.open("https://www.baidu.com/");
if (a == "用户名不存在")
alert(a)
if (a == "密码错误!")
alert(a)
},
error: function(e) {
console.log(e)
}
})
} else {
alert('两次密码输入不一样');
}
}
)
})
</script>
</head>
<body>
<div class="box">
<div class="box-logo">
<img src="./yyy.png" alt="">
</div>
<div class="box-first">
<input id="user" type="text" placeholder="用户名">
</div>
<div class="box-one active">
<input id="mima1" type="password" placeholder="输入密码">
</div>
<div class="box-one">
<input id="mima2" type="password" placeholder="请再次输入密码">
</div>
<div class="box-text">
<span>新用户登陆即自动注册,并表示已同意<a href="https://www.baidu.com/">《用户服务协议》</a></span>
</div>
<div class="box-btn">
<button id="login">登陆</button>
</div>
<div class="box-we">
<span><a href="https://www.baidu.com/">关于我们</a></span>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background: #fff;
}
.box{
width: 300px;
margin: 50px auto;
/* background: #999; */
}
.box-logo{
width: 300px;
text-align: center;
}
.box-logo img{
width: 150px;
margin:auto;
padding-bottom: 20px;
}
.box-one{
width: 298px;
height: 50px;
/* background: #000; */
margin-bottom: 20px;
border: 1px solid #999;
border-radius: 5px;
position: relative;
}
.box-first input{
width: 298px;
height: 50px;
/* background: #000; */
margin-bottom: 20px;
border: 1px solid #999;
position: relative;
outline: none;
}
.box-one input{
width: 280px;
height: 48px;
border: none;
position: absolute;
left: 8px;
font-size: 16px;
outline: none;
}
.active span{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #999;
cursor: pointer;
}
.active span:hover{
color: #2395ff;
}
.box-text{
width: 300px;
text-align: left;
padding-bottom: 20px;
}
.box-text span{
font-size: 14px;
color: #999;
}
.box-text a{
text-decoration: none;
color: #2395ff;
cursor: pointer;
}
.box-btn{
width: 300px;
padding-bottom: 20px;
}
.box-btn button{
width: 300px;
height: 45px;
border-radius: 5px;
border: none;
background: #4cd964;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.box-we{
width: 300px;
text-align: center;
}
.box-we span{
font-size: 14px;
color: #999;
cursor: pointer;
}