61 lines
1.7 KiB
HTML
61 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="author" content="flykhan" />
|
|
<meta name="keywords" content="c c++ 物联网" />
|
|
<title>登录界面</title>
|
|
</head>
|
|
|
|
<body>
|
|
<form onsubmit="return login(this);">
|
|
<div>
|
|
<label>用户名</label>
|
|
<input name="name" />
|
|
</div>
|
|
<div>
|
|
<label>口 令</label>
|
|
<input name="pwd" type="password" />
|
|
</div>
|
|
<div>
|
|
<button>登录</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
function login(form) {
|
|
// 创建了 js 对象，只包含属性的对象即为 json 对象
|
|
let login_data = {
|
|
// 对象的属性和属性值定义
|
|
name: form.name.value.trim(),
|
|
pwd: form.pwd.value.trim(),
|
|
};
|
|
|
|
fetch("/cgi-bin/login.cgi", {
|
|
method: "POST", // 请求方法
|
|
// 将 login_data 对象转为 JSON 字符串
|
|
body: JSON.stringify(login_data), // 请求体
|
|
headers: {
|
|
"Content-Type": "application/json", // 请求头
|
|
},
|
|
})
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
console.log(data);
|
|
// 判断是否登录成功，成功是打开 css3.html 页面
|
|
if (data.code == 0) {
|
|
// 浏览器存储登录成功后的用户信息
|
|
localStorage.setItem("login_user", JSON.stringify(data.data));
|
|
open("index.html", "_self");
|
|
} else {
|
|
// 如果失败，则弹出对话框，显示登录失败消息
|
|
alert(data.msg);
|
|
}
|
|
});
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|