<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
div {
width: 500px;
height: 600px;
margin: 0 auto;
}
form {
width: 600px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
border: 1px solid #000;
}
form div {
width: 300px;
height: 50px;
margin: 0 auto;
margin-top: 20px;
line-height: 50px;
display: flex;
}
form label {
width: 100px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
}
form div input {
width: 200px;
height: 30px;
border: 1px solid #000;
display: block;
}
</style>
</head>
<body>
<div>
<form>
<div>
<label>用户名:</label>
<input type="number" placeholder="请输入用户名" id="username" />
</div>
<div>
<label>密码:</label>
<input type="password" placeholder="请输入密码" id="password" />
</div>
</form>
<button id="login">登录</button>
<button id="reg">注册</button>
</div>
</body>
<script>
let login = document.getElementById("login");
let reg = document.getElementById("reg");
login.onclick = function () {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let xhr = new XMLHttpRequest();
xhr.open("post", "http://localhost:3000/login");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(username & password);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
if (data.code == 1) {
alert("登录成功");
location.href = "http://localhost:3000/index.html";
} else {
alert("登录失败");
}
}
};
};
leg.onclick = function () {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let xhr = new XMLHttpRequest();
xhr.open("post", "http://localhost:3000/reg");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(username & password);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
if (data.code == 1) {
alert("注册成功");
location.href = "http://localhost:3000/index.html";
} else {
alert("注册失败");
}
}
};
};
</script>
</html>