<style>
body{
background-color: aquamarine;
}
.login{
width: 350px;
height: 400px;
border: 2px solid rebeccapurple;
margin:100px auto;
}
.login h3{
line-height: 35px;
text-align: center;
font-size:17px;
font-weight: bold;
}
.login p{
margin:20px;
}
input[type=password]{
margin-left:16px;
}
.login-btn{
margin-left:69px;
}
</style>
<div class="login">
<h3>校友相亲登录页</h3>
<p>
登录名:
<input type="text">
</p>
<p>
密码:
<input type="password">
</p>
<p>
<button class="login-btn" onclick="login()">登录</button>
</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 发送用户名和密码给后台,后台拿到数据,去数据库验证,存在返回成功,不存在返回不存在该用户 */
/* 点击登录调取后台接口 */
function login() {
if (!$('input[type=text]').val().trim() || !$('input[type=password]').val().trim()) {
alert('用户名或者密码不能为空')
return
}
// $.ajax({
// url:"http://timemeetyou.com:8889/api/private/v1/login",
// method:"post",/* 因为登录要加密,所以用post */
// data:{
// username:$('input[type=text]').val(),
// password:$('input[type=password]').val()
// },
// success:function(res){
// if(res.meta.status!=200){
// alert(res.meta.msg)
// return;
// }
// }
// })
/* post简写 */
let url = "http://timemeetyou.com:8889/api/private/v1/login";
$.post(url, {
username: $('input[type=text]').val(),
password: $('input[type=password]').val()
}, function (res) {
if (res.meta.status != 200) {
alert(res.meta.msg)
return;
}
alert(res.meta.msg)
})
}
</script>