本文档旨在指导开发者如何在 JavaScript 验证客户端输入后，正确地调用 Servlet 来处理表单数据。我们将重点关注如何避免常见的 HTTP 405 错误，并提供清晰的代码示例和最佳实践，确保数据安全可靠地传输到服务器。
在 Web 开发中，客户端验证通常用于在数据提交到服务器之前检查其有效性，从而减少服务器的负担和提高用户体验。当 JavaScript 验证通过后，需要将数据发送到服务器端的 Servlet 进行进一步处理，例如数据库操作或业务逻辑处理。
1. 理解 HTTP 方法和 Servlet 调用
Servlet 通过 HttpServlet 类处理 HTTP 请求。常见的 HTTP 方法包括 GET 和 POST。GET 方法通常用于获取资源，而 POST 方法用于提交数据。Servlet 通过 doGet() 和 doPost() 方法分别处理这两种请求。
当你在 HTML 表单中使用 method="post" 时，浏览器会向 action 属性指定的 URL 发送一个 POST 请求。如果你的 Servlet 只实现了 doPost() 方法，而浏览器发送了 GET 请求，就会出现 HTTP 405 "Method Not Allowed" 错误。
立即学习“Java免费学习笔记（深入）”；
2. 解决 HTTP 405 错误
在原问题中，JavaScript 代码阻止了表单的默认提交行为，并且在验证失败后重新加载了页面。这导致浏览器在重新加载后尝试使用 GET 方法访问 Servlet，从而引发了 HTTP 405 错误。
解决这个问题的方法是：
- 仅在验证失败时阻止表单提交，验证成功时允许表单按默认行为提交。
- 确保 Servlet 实现了 doPost() 方法来处理 POST 请求。
3. 修改后的 JSP 代码
<html>
<head><title>Login</title></head>
<link rel="stylesheet" href="css/style.css">
<body>
<div class="Welcome-division">
<div class="header-top"> <a href="/"><img class="logo" src="images/logo.png" alt="Hostel logo"></a>
<H1>Welcome to Arihant's hostel</H1>
</div>
<navbar class="horizontal-navbar">
<a href="Home.jsp">Home</a>
<a class="active" href="Login.jsp">Login</a>
<a href="Room details.jsp">Room Details</a>
<a href="Contact Us.jsp">Contact Us</a>
</navbar>
</div>
<div class="center-body">
<navbar class="Menu-option">
<a href="Home.jsp">Home</a>
<a class="active" href="Login.jsp">Login</a>
<a href="Room details.jsp">Room Details</a>
<a href="Contact Us.jsp">Contact Us</a>
</navbar>
<div class="Room-information">
<form class="loginForm" method="post" action="LoginServlet" id="loginForm">
<div>Room No: <input type="text" name="Roomno" id="Rno"><br></div><br>
<div>Password : <input type="password" name="password" id="pass"></div><br>
<input id="formSubmit" type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="Copyright-Information">
© Arihant graphics
</div>
<script>
const formSubmit = document.getElementById("formSubmit");
const loginForm = document.getElementById("loginForm");
formSubmit.addEventListener("click", (e) => {
const Rno = document.getElementById("Rno").value;
const Password = document.getElementById("pass").value;
if (Rno == null || Rno == "" || Password.length < 7) {
alert("Please enter a Room No or your password is incorrect");
e.preventDefault(); // 阻止表单提交
return; // 退出事件处理函数
}
// 如果验证通过，则允许表单提交
});
</script>
</body>
</html>关键修改：
- 移除了 setTimeout(function () { window.location.reload(); }, 5000); 这一行，避免了不必要的页面重载。
- 在验证失败时，使用 e.preventDefault(); 阻止表单的默认提交行为。
- 在验证失败时，添加return;语句，避免后续代码执行，保证只在验证失败时阻止表单提交。
- 添加了form的id，方便js获取。
4. 修改后的 Servlet 代码 (保持不变)
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public LoginServlet() {
super();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student","root","root");
int roomNo = Integer.parseInt(request.getParameter("Roomno"));
String password = request.getParameter("password");
PreparedStatement ps = con.prepareStatement("select * from login where roomNo=? and password=?");
ps.setInt(1, roomNo);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();
if(rs.next()) {
int userRoom = rs.getInt(1);
String userName = rs.getString(3);
out.println("RoomNo:"+userRoom+" is allocated to "+ userName);
con.close();
}
else
out.println("Failed to log in");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}确保 Servlet 实现了 doPost() 方法来处理 POST 请求。
5. 总结与注意事项
- 客户端验证不是安全保障： 客户端验证主要用于提高用户体验，但不能完全依赖它来保证数据的安全性。服务器端验证仍然是必需的，以防止恶意用户绕过客户端验证。
- 错误处理： 在 Servlet 中，要进行完善的错误处理，例如处理数据库连接失败、SQL 异常等情况，并向客户端返回合适的错误信息。
- 安全性： 密码等敏感信息不要直接在客户端存储或传输。可以使用加密算法对密码进行哈希处理，并在服务器端进行验证。
- 用户体验： 在客户端验证失败时，向用户提供清晰的错误提示，帮助他们快速纠正错误。
通过以上步骤，你就可以在 JavaScript 验证后，正确地调用 Servlet，并避免常见的 HTTP 405 错误。记住，客户端验证和服务器端验证都是 Web 应用安全的重要组成部分，要综合考虑，才能构建安全可靠的 Web 应用。
