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>
|