使用 JavaScript 验证后调用 Servlet 的正确方法-java教程-PHP中文网

使用 JavaScript 验证后调用 Servlet 的正确方法

心靈之曲

发布： 2025-08-28 17:50:02

原创

776人浏览过

使用 javascript 验证后调用 servlet 的正确方法

本文档旨在指导开发者如何在 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 错误。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

解决这个问题的方法是：

仅在验证失败时阻止表单提交，验证成功时允许表单按默认行为提交。
确保 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">
        &#169; 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 请求。