一、效果展示
二、前端html/css代码
(1)regist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="CSS3.css" />
<script src="js/jQuery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#bt").click(function() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var username = $("#username").val();
var password = $("#password").val();
xhr.open('get', encodeURI('textregist?username='+username+'&password='+password), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
$("#sp").text(txt);
}
}
xhr.send(null);
})
})
</script>
</head>
<body>
<div class="login">
<form action="login.do" method="post" align="center" style="font-size:30px">
<div class="login-top">
登录
</div>
<div class="login-center">
<div class="center-img"><img src="name.png"></div>
<div class="input">
<input type="text" id="username" placeholder="请输入您的用户名" autofocus>
</div>
</div>
<div class="login-center">
<div class="center-img"><img src="password.png"></div>
<input type="password" id="password" placeholder="请输入您的密码">
</div>
<div class="login-button">
<div id="bt">登录</div>
</div>
<font color='red'><span id="sp" > </span> <font>
</form>
</div>
</body>
</html>
(2)CSS3.css
.login {
width: 350px;
height: 500px;
position: absolute;
border-radius: 5px;
background: #ffffff;
box-shadow: 0px 0px 15px #f3bebe;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -175px;
}
.login-center {
width: 100%;
box-sizing: border-box;
padding: 0 40px;
margin-bottom: 30px;
}
img{ vertical-align: top; max-width: 100%; }
.center-img {
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
}
.login-top {
font-size: 24px;
margin-top: 100px;
padding-left: 10px;
box-sizing: border-box;
color: #333333;
margin-bottom: 50px;
}
.login-button {
font-size:16px;
cursor: pointer;
height: 40px;
width: 250px;
text-align: center;
line-height: 40px;
background-color: dodgerblue;
border-radius: 5px;
margin: 0 auto;
margin-top: 50px;
color: white;
}
三、服务器端代码
(1)TextRegistServlet.java
package demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TextRegistServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter out = response.getWriter();
if(username.equals("admin") && password.equals("admin")){
out.println("登录成功");
}else{
out.println("登录失败");
}
out.flush();
out.close();
}
}