138 lines
5.2 KiB
HTML
138 lines
5.2 KiB
HTML
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: Baron
|
|||
|
|
* @Date: 2022-05-23 09:31:25
|
|||
|
|
* @LastEditors: Andy
|
|||
|
|
* @LastEditTime: 2022-10-13 14:16:35
|
|||
|
|
-->
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="max-age" content="31536000">
|
|||
|
|
<meta http-equiv="Pragma" content="public">
|
|||
|
|
<meta http-equiv="Cache-control" content="public">
|
|||
|
|
<meta http-equiv="Cache" content="public">
|
|||
|
|
<meta name="viewport"
|
|||
|
|
content="width=device-width, initial-scale=1, minimum-scale=0.01, maximum-scale=1, user-scalable=yes" />
|
|||
|
|
<title>登录页面</title>
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
<!-- <link rel="stylesheet" href="css/common.css"> -->
|
|||
|
|
<script src="js/jquery-3.4.1.min.js"></script>
|
|||
|
|
<script> src = "js/jsonid.js"</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- <div class="screen"> -->
|
|||
|
|
<div class="login">
|
|||
|
|
<ul class="login_ul">
|
|||
|
|
<li class="active">登录 </li>
|
|||
|
|
<li>
|
|||
|
|
<input id="pwd" type="password" maxlength="10" placeholder="密码" /><br>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="login_checkbox">
|
|||
|
|
<input type="checkbox" id="checkbox">
|
|||
|
|
<label for="checkbox"></label>
|
|||
|
|
<span for="checkbox">记住密码</span>
|
|||
|
|
</div>
|
|||
|
|
<a href="edit_pwd.html"><span class="login_span">修改密码</span></a>
|
|||
|
|
<button class="login_btn" id="login">登录</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="d" class="toast">
|
|||
|
|
<span>密码不能为空</span>
|
|||
|
|
</div>
|
|||
|
|
<div id='a' class="toast">
|
|||
|
|
<span>登录中....</span>
|
|||
|
|
</div>
|
|||
|
|
<div id="b" class="toast">
|
|||
|
|
<span>登录失败</span>
|
|||
|
|
</div>
|
|||
|
|
<div id='c' class="toast">
|
|||
|
|
<span>登录成功</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- </div> -->
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
document.getElementById('pwd').value = localStorage.getItem('keyPass') || '';
|
|||
|
|
if ((localStorage.getItem('keyPass') || '') !== '') {
|
|||
|
|
document.getElementById('checkbox').setAttribute('checked', '');
|
|||
|
|
}
|
|||
|
|
//登录验证
|
|||
|
|
var baseHost = document.location.origin
|
|||
|
|
$('#login').on('click', function () {
|
|||
|
|
var pwd = $('#pwd').val();
|
|||
|
|
if (document.getElementById('checkbox').checked) {
|
|||
|
|
localStorage.setItem('keyPass', pwd);
|
|||
|
|
} else {
|
|||
|
|
localStorage.setItem('keyPass', '');
|
|||
|
|
}
|
|||
|
|
var login = {}
|
|||
|
|
// login.jsonid = json_id;
|
|||
|
|
login = new Object()
|
|||
|
|
login.log_in = new Object()
|
|||
|
|
login.log_in.type = 1
|
|||
|
|
login.log_in.pass = pwd
|
|||
|
|
console.log(JSON.stringify(login))
|
|||
|
|
if (!pwd.trim().length) {
|
|||
|
|
$('#d').css('display', 'flex')
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('#d').css('display', 'none')
|
|||
|
|
}, 2000)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
//1.创建ajax对象
|
|||
|
|
var xhr = new XMLHttpRequest()
|
|||
|
|
//2.连接服务器
|
|||
|
|
xhr.open('post', baseHost + '/communication', true)
|
|||
|
|
//3.设置请求头信息
|
|||
|
|
xhr.setRequestHeader('content-type', 'application/json')
|
|||
|
|
//4.发送请求
|
|||
|
|
xhr.send(JSON.stringify(login));
|
|||
|
|
$('#a').css('display', 'flex');
|
|||
|
|
xhr.onreadystatechange = function () {
|
|||
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|||
|
|
//1.服务器返回的json格式数据
|
|||
|
|
var json = xhr.responseText
|
|||
|
|
console.log(JSON.stringify(json))
|
|||
|
|
//alert(xhr.responseText)
|
|||
|
|
/*2.
|
|||
|
|
*通过eval方法将上面的数据转换成json格式，
|
|||
|
|
*上面数据的所有双引号全部转换成单引号
|
|||
|
|
*/
|
|||
|
|
var result = eval("(" + json.replace(/"/g, "'") + ")")
|
|||
|
|
/* 3.转换成json格式后可以通过对象的方式进行访问，既通过“.”的方式
|
|||
|
|
* 判断从服务器返回值中return是否等于0
|
|||
|
|
* 0：密码正确 1：密码错误
|
|||
|
|
*/
|
|||
|
|
if (result.led_protocol.log_in.return == 0) {
|
|||
|
|
$('#a').css('display', 'none');
|
|||
|
|
$('#c').css('display', 'flex');
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('#c').css('display', 'none')
|
|||
|
|
}, 500)
|
|||
|
|
window.location.href = "/screen_main.html"
|
|||
|
|
return
|
|||
|
|
} else {
|
|||
|
|
$('#a').css('display', 'none');
|
|||
|
|
$('#b').css('display', 'flex');
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('#b').css('display', 'none')
|
|||
|
|
}, 500)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|