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

使用 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" 错误。

2. 解决 HTTP 405 错误

在原问题中，JavaScript 代码阻止了表单的默认提交行为，并且在验证失败后重新加载了页面。这导致浏览器在重新加载后尝试使用 GET 方法访问 Servlet，从而引发了 HTTP 405 错误。

Word 文档生成与编辑

需要创建、读取、编辑或处理 Word 文档（.docx / .dotx）时使用。触发词：'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合：小说大纲稿、投稿文档、合同、简历、工作总结。

下载

解决这个问题的方法是：

仅在验证失败时阻止表单提交，验证成功时允许表单按默认行为提交。
确保 Servlet 实现了 doPost() 方法来处理 POST 请求。

3. 修改后的 JSP 代码

<title>Login</title><link rel="stylesheet" href="css/style.css"><div class="Welcome-division">
        <div class="header-top"> <a href="/">@@##@@</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%20details.jsp">Room Details</a>
            <a href="Contact%20Us.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%20details.jsp">Room Details</a>
            <a href="Contact%20Us.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>

关键修改：

移除了 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 请求。