登录注册页面
程序员文章站
2023-12-28 13:23:52
...
登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
*{margin: 0;padding: 0;}
.main{
margin-top:50px;
margin-left: 200px;
}
.form-group input{
width: 200px;
}
</style>
</head>
<body>
<form class="main">
<div class="form-group">
<label for="username">用户名</label>
<input class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="rem"> 30天免登录
</label>
</div>
<button type="submit" class="btn btn-info" id="submit">登录</button>
<button type="submit" class="btn btn-warning" id="post">去注册</button>
</form>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(function(){
let http = new XMLHttpRequest()
http.open("get",`http://10.35.161.124:8080/logon?username=${$("#username").val()}&password=${$("#password").val()}`)
http.send()
http.onreadystatechange = function(){
if(http.readyState === 4){
console.log(http.responseText)
if(http.responseText === "success"){
alert("登录成功")
}
else{
alert("用户名或密码错误")
}
}
}
if($("#rem").prop("checked")){
localStorage.setItem("username",$("#username").val())
localStorage.setItem("password",$("#password").val())
}
})
// console.log(localStorage.getItem("username"))
if(localStorage.getItem("username")&&localStorage.getItem("password")){
$("#username").val(localStorage.getItem("username"))
$("#password").val(localStorage.getItem("password"))
}
</script>
</body>
</html>
注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
*{margin: 0;padding: 0;}
.form-horizontal{
margin-top: 50px;
}
.form-horizontal input{
width: 200px;
}
</style>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">注册</button>
</div>
</div>
</form>
<script src="jquery.min.js"></script>
<script>
$(".btn").click(function(){
// alert(1)
let http = new XMLHttpRequest()
http.open("get",`http://10.35.161.124:8080/addUser?username=${$("#username").val()}&password=${$("#password").val()}`)
http.send()
http.onreadystatechange = function(){
if(http.readyState === 4){
console.log(http.responseText)
if(http.responseText === "success"){
alert("注册成功")
location.href="http://10.35.161.124/6.3/logon.html"
}
else{
alert("用户名或密码错误")
}
}
}
})
</script>
</body>
</html>