使用原生AJAX完成登录页面验证异步交互效果servlet
时间: 2023-10-15 07:07:14 浏览: 42
下面是一个使用原生AJAX完成登录页面验证异步交互效果servlet的示例代码:
1. HTML代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<script>
function login() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("msg").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "LoginServlet", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
xhr.send(data);
}
</script>
</head>
<body>
<h1>Login Page</h1>
<form>
<label>Username:</label>
<input type="text" id="username"><br>
<label>Password:</label>
<input type="password" id="password"><br>
<input type="button" value="Login" onclick="login()">
</form>
<p id="msg"></p>
</body>
</html>
```
2. Java代码(LoginServlet)
```java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class LoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter out = response.getWriter();
if (username.equals("admin") && password.equals("admin123")) {
out.print("<span style='color:green;'>Login successful!</span>");
} else {
out.print("<span style='color:red;'>Login failed!</span>");
}
out.close();
}
}
```
该示例使用了XMLHttpRequest对象来发送异步请求,并在服务器端使用了doPost()方法来处理请求。在接收到请求后,该方法从请求参数中获取用户名和密码,并进行验证。如果验证通过,将返回“Login successful!”消息;否则,将返回“Login failed!”消息。在HTML页面中,使用了JavaScript代码来处理用户的登录请求,并将消息显示在页面上。